$attrs官方文档
https://cn.vuejs.org/v2/api/#vm-attrs
什么叫“父作用域中不作为 prop 被识别 (且获取) 的特性绑定”
父作用域给子组件设置prop的时候,比如你设置了2个prop,:sortName="sortName" :partShow="partShow"
,其中sortName
被子组件作为prop接收了,代码范例:
props: {
sortName: {
type: String,
default: ''
}
},
另一个partShow
没有接收,会怎样?partShow会被当做普通属性,渲染在节点上:
partShow就是“父作用域中不作为 prop 被识别 (且获取) 的特性绑定”。$attrs就包括partShow。
为什么要使用$attrs
父->子组件传递数据,是使用props来接收数据,根本不需要$attrs
,但是,如果是爷爷->孙子组件传递数据,需要父亲组件做一个中继,接收的属性对自身没有用,只对孙子组件有用,等于父亲组件要写一遍props,孙子组件要写一遍props,这就比较麻烦了,$attrs
就是为了解决这个问题。
使用$attrs
现在,爷爷组件不做任何修改,父亲组件加一行inheritAttrs:false
,官方文档是:
https://cn.vuejs.org/v2/api/#inheritAttrs
export default {
inheritAttrs:false,
}
inheritAttrs:false意思是不继承属性,也就是说,爷爷的遗产,我放弃继承,加上这句,则渲染后的节点上,没有partShow="true"
这些字符,不加,则有这些字符。我们当然希望不要有这些字符。
同时,父亲作用域的孙子组件要写上v-bind="$attrs"
,意思是给孙子组件绑定一系列属性,而这些属性就来自于爷爷组件。
孙子组件这么使用这一系列属性呢?就用props正常接收即可。
小结
这里面涉及到的语法有2个:inheritAttrs:false
和v-bind="$attrs"
,其中inheritAttrs:false
可有可无,影响不大,核心其实就是父亲作用域给孙子组件加上v-bind="$attrs"
。
孙子->爷爷传递信息
vue.js也提供了$listener
实现这个目的,使用方法也简单,就是在父亲作用域的孙子组件的v-bind="$attrs"
旁边,写上v-on="$listeners"
即可。其他该怎么写就怎么写,爷爷组件要写监听事件,孙子组件要使用this.$emit()
触发事件。就不多说了。