vue.js利用$attrs、$listener实现爷爷-孙子组件信息传递

$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会被当做普通属性,渲染在节点上:

image.png

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:falsev-bind="$attrs",其中inheritAttrs:false可有可无,影响不大,核心其实就是父亲作用域给孙子组件加上v-bind="$attrs"

孙子->爷爷传递信息

vue.js也提供了$listener实现这个目的,使用方法也简单,就是在父亲作用域的孙子组件的v-bind="$attrs"旁边,写上v-on="$listeners"即可。其他该怎么写就怎么写,爷爷组件要写监听事件,孙子组件要使用this.$emit()触发事件。就不多说了。