解释：
-
组件传值的时候会用到 爷爷在父亲组件传递值，父亲组件会通过$attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法
多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法--$attrs/$listeners
-
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
-
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
父组件：
<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 传递的内容，会在 $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">这个是自动监听父组件parentClick事件</p>
</div>
</template>
<script>
import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
export default {
// inheritAttrs: false, 我暂时发现是可加可不加
props: {
foo: String // foo作为props属性绑定
},
data () {
return {
value: '',
};
},
mounted () {
this.$emit('parentClick');
}
}
</script>
<style>
</style>
image.png
