vue中的$listeners与$attrs

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

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

在不使用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>