https://blog.csdn.net/qq_33769914/article/details/87347371
https://blog.csdn.net/qq_33769914/article/details/81012431
上面两篇都介绍过父子组件的通信。
下面介绍一种新的方式,使用$attrs及$listeners属性
当我们有三个组件。A。B。C。A是父组件。B是子组件。C孙子组件。当我们A向C传值的时候我们有两种方式;
1,一般都是通过先传给B再由B传给C。这一种通过props和$emit的方式,使得组件之间的业务逻辑臃肿不堪,B组件在其中仅仅充当的是一个中转站的作用。
2,把值放在vuex里面作为共享的。但是显然这种太浪费了。
我们可以通过$attrs传父组件传来的,而当前页面没有接收的参数。
$listeners父组件传来的函数而当前没有通过this.$emit返回的。
举个例子
A 组件 (Child.vue)
|
B组件 (Child1.vue)
v-bind="$attr" //当前页面没有接收完父组件传来的变量。传来的所有变量减去当前props接收的,就传给了这个child2的组件 v-on="$listeners" 当前页面没有返回的父组件传来的所有的函数。所有的减去给返回值的,就传给了child2组件
<button @click="toParent()">点击</button>
|
C 组件 (Child2.vue)
<button @click="toParent2()">点击</button>
|
A组件一共传了两个变量pchild1
,
pchild2
。两个接收函数
test1,test2.
组件B中props中接收了一个pchild1。所以
$attr传的是剩下的那个pchild2
组件B中函数里emit回去的只有test1.所有
$listener传给C组件的是剩下的那个
test2
inheritAttrs
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。