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>