前言
父组件传递给子组件的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组件中触发该事件。
Comments | NOTHING