vue組件傳值——$attrs和$listeners

有些變態需求：比如說A父組件里面導入了B組件，可是B組件里面又導入了C組件，現在需要A父組件傳值給C組件，或者是C組件需要傳值給父組件，這時候就需要用到$attrs和$listeners了。

$attrs

　　　　包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。（父傳孫專用）

$listener

　　　　包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。（孫傳父專用）

                                                                                                                                        以上內容參考官網：https://cn.vuejs.org/v2/api/#vm-attrs

直接看使用代碼：

在父組件當中，最外層組件

<template>
    <div>
        <Child1 :child1Info="child1" :child2Info="child2" v-on:test1="onTest1" v-on: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>在子組件當中:</p>
        <p>props-child1Info: {{child1Info}}</p>
        <p>$attrs: {{$attrs}}</p>
        <hr>
        <!-- Child2組件中能直接觸發test的原因在於 B組件調用C組件時 使用 v-on 綁定了$listeners 屬性 -->
        <!-- 通過v-bind 綁定$attrs屬性，Child2組件可以直接獲取到A組件中傳遞下來的props（除了child1組件中props聲明的） -->
        <Child2 v-bind="$attrs" v-on="$listeners"></Child2>
    </div>
</template>
<script>
import Child2 from './child2';
export default {
    props: ['child1Info'],
    data() {
        return {};
    },
    components: { Child2 },
    mounted() {
        this.$emit('test1','嘻嘻');
    }
};
</script>

 

//在孫子組件當中：


<template>
    <div class="child-2">
        <p>在最里層組件當中child2:</p>
        <p>props-child2Info: {{child2Info}}</p>
        <p> $attrs 的值: {{$attrs}}</p>
        <hr>
    </div>
</template>
<script>
export default {
    props: ['child2Info'],
    data() {
        return {};
    },
    mounted() {
        this.$emit('test2','哈哈');
    }
};
</script>

代碼詳細說明：

 

 

 

 

 

內容參考博客——https://www.cnblogs.com/yuzhongyu/p/10490228.html