- props和$emit
(适用于简单的父子组件间的通信)
父组件 --> 子组件:通过props传递数据;
子组件 --> 父组件:通过$emit触发事件来传递数据;
- $attrs和$listeners
(适用于组件嵌套层数较多的组件间的通信,例如父A含B,B含C,想要进行A-->C的数据传递,或者A-->C往后)
// 父组件中定义了A组件
<A :messagec="messagec" @getData="getCData" />
// A组件中props接受messagec,且定义了B组件
props: ["messagec"],
<B v-bind="$attrs" v-on="$listeners" />
// B组件中不用props接收,且定义了C组件
<C v-bind="$attrs" v-on="$listeners" />
// C组件接受到数据,用于显示,并且能够触发事件与父组件通信
<div @click="cClickHandler">
{{$attrs.messagec}}
</div>
methods: {
cClickHandler(){
this.$emit("getCData","我是C的数据");
}
}
- 中央事件总线
(适用于兄弟叔侄组件之间的通信,例如父组件下含有组件A、B,A组件下含有C或者更多子组件,它们想和B,或者是B以下的子组件进行通信)
// var一个bus的对象
var bus = new Vue(); xz
// 定义父组件App
var App = {
data(){
return {
msg: "我是父组件的内容",
messagec: "hello",
}
},
methods:{},
template:'
<div>
<brother1></brother1> // 子组件brother1
<brother2></brother2> // 子组件brother2
</div>
'
};
//定义全局组件brother1
Vue.component('brother1',{
data(){
return {
msg: "hello brother1",
brother2Msg: "",
}
},
mounted(){
// 绑定全局事件globalEvent事件
bus.$on('globalEvent',(val) => {
bus.brother2Msg = val;
})
},
methods:{},
template:'
<div>
<p>我是老二</p>
<p>老大传过来的数据:{{brother2Msg}}</p>
</div>
'
});
//定义全局组件brother2
Vue.component('brother2',{
data(){
return {
msg: "hello brother1",
}
},
methods:{
passData(val){
// 触发全局事件globalEvent
bus.$emit("globalEvent",val);
},
},
template:'
<div>
<p>我是老大</p>
<input type="text" v-model="msg" @input="passData(msg)" / >
</div>
'
});
- provide和inject
父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用inject那么就可以注入provide的数据。而不是局限于只能从当前父组件的props属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
// 定义父组件App
var App = {
data(){
return {
}
},
provide:{
"for": '他爹',
},
template:'
<div>
<h2>我是入口组件</h2>
<Parent / >
</div>
'
};
//定义全局组件Parent
Vue.component('Parent ',{
template:'
<div>
<p>我是父亲</p>
<Child / >
</div>
'
});
//定义全局组件Child
Vue.component('Child ',{
data(){
return {
msg: "",
}
},
inject:["for"],
created(){
this.msg = this.for;
},
template:'
<div>
<p>我是孩子{{msg}}</p>
</div>
'
});