前言

父组件传递给子组件的prop属性，若在子组件没有定义，那么会自动 添加到组件的根元素上， 将已有的同名 attribute 进行替换或与其进行智能合并。（合并class跟style）

A与C之间的通信

1.使用vuex

2.props一级一级传值

3.使用listeners监听

vue2.3+新增了$attr,$listener和 inheritAttrs

  • 关于 inheritAttrs ,其实就是最上面的那个例子，当props定义时，会自动将属性帮到根元素上， inheritAttrs :false就是阻止这一行为。 这个选项不影响 class 和 style 绑定。
  • 使用$attrs可以将所有未定义的props生效,并可以通过v-bind绑定到内层组件
//Father.vue
<div>
  这是父组件
    <ChildA :foo="foo" :bar="bar"/>
</div>

//ChildA 
 <div foo="123">这是子组件A      
   接受父组件的值：{{$attrs}} //打印{foo:'foo,bar:'bar}，因为props在A中未定义
  <ChildB  v-bind="$attrs"/>
 </div>
export default {
components:{
    ChildB
},
 // props:['foo'],
 inheritAttrs:false
}}

//ChildB
<template>
    <div>
        这是子组件B
        我接收了B传的值:{{foo}}//打印foo
    </div>
</template>

<script>
export default {
props:['foo']//定义A传来的$attrs
}
</script>

使用$attrs ，inheritAttrs 属性 能够使用简洁的代码，将A组件的数据传递给C组件 就简单的完成了.

$listeners 属性 ,将C组件信息传给A

官网解释： 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

demo:

//FA
<div>
  这是父组件
    <ChildA v-on:baz="baz" />
</div>
methods:{
    baz(data){
        console.log(data)//C传的值给A
    }
}
//A
   <div>
  <ChildB  v-bind="$attrs" v-on="$listeners"/>
    </div>

//B
  <div @click="baz"></div>
methods:{
    baz(){
        console.log(123)
        this.$emit('baz','我是C')
    }
}

简单来说就是一个桥接的作用，在父组件中定义一个事件，然后在A组件中用$listeners 监听，传递给B组件，在B组件中触发该事件。

赏

爬。