vue父孙组件传值（$attr及$listeners）的使用

父组件

<template>
     <div>
         <!-- 将值传给子组件 子组件可以获取自己想要的值 也可以忽视掉需要传给孙子组件的值 -->
         <!-- 同时获取通过$listeners传递的孙子组件事件（@test2）和$emit传递的子组件事件（$test1） -->
         <Child1 :child1Info="child1" :child2Info="child2" @test1="onTest1" @test2="onTest2">
         </Child1>
     </div>
 </template>
 <script>
 import Child1 from './child1';
 export default {
     data() {
         return {
             child1:"hahha",
             child2:"asdsdasd"
         };
     },
     components: { Child1 },
     methods: {
         onTest1(msg) {
             console.log('test1 running...',msg);
         },
         onTest2(msg) {
             console.log('test2 running',msg);
         }
     }
 };
 </script>

子组件

<template>
     <div class="child-1">
         <p>props-child1Info: {{child1Info}}</p>
         <p>$attrs: {{$attrs}}</p>
        <hr>
        <!-- 通过v-bind 绑定$attrs属性，孙子组件组件可以直接获取父组件传递的值（除了child1组件中props声明的）通过v-on绑定$listeners属性 父组件可以获取从孙子组件传来的事件 -->
        <Child2 v-bind="$attrs" v-on="$listeners"></Child2>
    </div>
</template>
<script>
import Child2 from './child2';
export default {
   props: {
     child1Info: {
       type: String,
       default: ''
     }
   },
    data() {
        return {};
    },
    components: { Child2 },
    mounted() {
        this.$emit('test1','嘻嘻');
    }
};
</script>

孙子组件

<template>
    <div class="child-2">
        <-- 可以直接通过$attrs来得到父组件传递过来的值 -->
        <p> $attrs 的值: {{$attrs.child2Info}}</p>
        <hr>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
   mounted() {
        // 通过$emit来给父组件传递事件
        this.$emit('test2','哈哈');
    }
};
</script>