vue中的$listeners与$attrs

该文章发布于 ,归类于 Javascript

关于$listeners$attrs,在vue官网上有相关介绍,点击查看

这里讲一个用法,比如有三个组件Test1,Test2Test3,Test1中可以向Test2中传递属性,而Test2又可以向Test3中传递属性和事件,那么,如果我想向Test3组件传递某一个属性值的话,需要先向Test2中传递,然后再通过Test2Test3中传递,这样感觉会很累,做了很多重复的操作。

在不使用vuex的情况下,还可以使用$listeners$attrs这两个属性。如下所示代码。

Test2.vue中可以这样写。

<template>
    <div class="test">
        <test3 v-bind="$attrs" v-on="$listeners"></test3>
    </div>
</template>

<script>
import Test3 from './Test3.vue'

export default {
    props: ['data1'],
    components: {
        Test3
    },
    mounted() {
        this.$emit('event1')
    }
}
</script>

Test3.vue

<template>
    <div class="test">{{data2}}</div>
</template>

<script>
export default {
    props: ['data2'],
    mounted() {
        this.$emit('event2')
    }
}
</script>

那么此时统一在Test1.vue中进行传值。

Test1.vue

<template>
  <div class="test">
    <test2 :data1="data1" :data2="data2" @event1="ev1" @event2="ev2"></test2>
  </div>
</template>

<script>
import Test2 from './Test.vue'
export default {
    data() {
        return {
            data1: 'hello world1',
            data2: 'hello world2'
        }
    },
    components: {
      Test2
    },
    methods: {
      ev1() {},
      ev2() {}
    }
}
</script>

相关文章