解釋：
-
組件傳值的時候會用到 爺爺在父親組件傳遞值丙笋，父親組件會通過$attrs獲取到不在父親props里面的所有屬性角溃，父親組件通過在孫子組件上綁定$attrs 和 $listeners 使孫組件獲取爺爺傳遞的值并且可以調(diào)用在爺爺那里定義的方法
多級組件嵌套需要傳遞數(shù)據(jù)時秒际，通常使用的方法是通過vuex芯肤。但如果僅僅是傳遞數(shù)據(jù)脓匿，而不做中間處理赦抖，使用 vuex 處理舱卡，未免有點大材小用。為此Vue2.4 版本提供了另一種方法--$attrs/$listeners
-
$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外)队萤。當(dāng)一個組件沒有聲明任何 prop 時轮锥，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件要尔。通常配合 interitAttrs 選項一起使用舍杜。
-
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件
父組件：
<template>
<vantInput :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="這個是傳遞的" v-on:parentClick="parentClick"></vantInput>
</template>
<script>
import vantInput from "@/views/vant.vue"
export default {
components: {
vantInput
},
data () {
return {
foo: "這個是props 傳遞的內(nèi)容赵辕，會在 $attrs 上不顯示",
boo: "Html",
coo: "CSS",
doo: "Vue"
};
},
methods: {
parentClick () {
console.log('parentClick 事件')
}
}
}
</script>
<style>
</style>
子組件：
<template>
<div>
<p>foo: {{ foo }}</p>
<p>子組件的$attrs: {{ $attrs }}</p>
<p v-on="$listeners">這個是自動監(jiān)聽父組件parentClick事件</p>
</div>
</template>
<script>
import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
export default {
// inheritAttrs: false, 我暫時發(fā)現(xiàn)是可加可不加
props: {
foo: String // foo作為props屬性綁定
},
data () {
return {
value: '',
};
},
mounted () {
this.$emit('parentClick');
}
}
</script>
<style>
</style>
image.png
