Vue 组件的通信方式（父子通信、子父通信，非子父（ref链、bus总线)）
一、为什么要进行组件通信？
组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信
二、组件的通信方式分类
- 父子组件通信
- 使用props实现
- 子父组件通信
- 通过自定义事件实现
- 非父子组件通信
- 通过ref链:可以实现非父子组件的通信，但是如果层级太多，就比较繁琐
- bus事件总线
- 多组件状态共享（ 多个组件共用同一个数据 ）(vuex)
- vuex实现
我们通过代码来具体来看一下这几种通信方式实现方式以及步骤
1、父子组件通信
通过props实现的方式,下面是一个简单完整示例
<body>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3> 这里是父组件 h3>
<hr>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 2000,
maskFlag: 10000000000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['aa','maskFlag']
})
new Vue({
}).$mount('#app')
</script>
我们对上述示例分步说明：
实现：需要在子组件获取父组件的数据
- a、在父组件的模板中将数据用单向数据绑定的姓氏，绑定在子组件身上
//子组件嵌套在父组件内，v-bind单项绑定父组件的数据 - b、在子组件的配置项中使用props配置项来接收这个数据，接收时，props的取值可以使用一个数组
Vue.component('Son',{
template: '#son',
props: ['aa','maskFlag'] ,//通过子组件自定义属性接收绑定父组件的数据
})
在父子通信的例子中我们还可以发现一点，在组件的配置项中，我们定义的data数据是一个函数,而new Vue的实例中data数据是一个对象,那为什么组件中的data要定义为一个函数呢？
- 我们知道组件是一个独立的个体，所以它应该拥有自己的数据,这个数据应该也需是一个独立的数据;
- 就是说这个数据应该有独立的作用域，也就是一个独立的使用范围,这个范围就是这个组件内；
- jvascript最大的特征是：函数式编程,而函数恰好提供了独立作用域。
为什么data要有返回值返回值还是一个对象？
- a、因为Vue是要通过observer来观察data选项的,所以必须要有返回值.
- b、Vue要通过es5的Object.difineProperty属性对对象进行getter和setter设置。
2、子父组件通信
通过自定义事件完成通信
<body>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3>这里是父组件h3>
<p>儿子给我{{ money}} p>
<Son @hongbao="givemoney">Son>
div>
template>
<template id="son">
<div>
<h3>这里是子组件h3>
<button @click="give">给父亲红包button>
div>
template>
body>
<script>
Vue.component('Father',{
template:'#father',
data(){
return {
money:0,
}
},
methods:{
givemoney(val){
this.money=val;
}
}
});
Vue.component('Son',{
template:'#son',
data(){
return {
money:3000,
}
},
methods:{
give(){
console.log(this.money)
this.$emit('hongbao',this.money)//触发父组件在子组件上定义的自定义事件
}
}
})
new Vue({
}).$mount('#app')
</script>
子父通信主要运用自定事件完成，通过 o n 定 义 ， on定义， on定义，emit触发;
我们对上述示例分步说明：
- a、在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
<Son @hongbao="givemoney"></Son>
//givemoney函数是在父组件配置项methods中定义的。
- b、在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件;
Vue.component('Son',{
template:'#son',
data(){
return {
money:3000,
}
},
methods:{
give(){
console.log(this.money)
this.$emit('hongbao',this.money)
//触发父组件在子组件上定义的自定义事件,$emit传入两个参数，参数一是定义在子组件上的事件，参数二传入自定事件处理程序。
}
}
})
- c、将组件定义的事件处理程序 give ，绑定在子组件的按钮上，点击按钮，触发give事件处理函数,进一步触发自定义事件,父组件的到子组件的数据
<template id="son">
<div>
<h3>这里是子组件</h3>
<button @click="give">给父亲红包</button>
</div>
</template>
参考自定义事件：https://blog.csdn.net/qq_40616529/article/details/93652453
3、非父子组件通信
ref链:
我们先用一段整体代码来说明ref通信,整体可能比较难以理解，下面我会分步骤来说明
<body>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3>这里是Father组件h3>
<button @click="look">查看father组件中this指向button>
<p> father:{{givef}} p>
<hr>
<Son ref="son">Son>
<hr>
<Girl ref="gril" :givef="givef">Girl>
div>
template>
<template id="son">
<div>
<h3>这里是Son组件h3>
div>
template>
<template id="girl">
<div>
<h3>这里是Girl组件h3>
<button @click="get">查看gril组件中this指向button>
<p> {{ giveg }} p>
div>
template>
body>
<script>
Vue.component('Father',{
template:'#father',
data(){
return {
givef:0,
}
},
methods:{
look(){
//通过父组件的$refs属性拿出money，并存储在父元素中
this.givef=this.$refs.son.money;
console.log(this.givef)
}
}
});
Vue.component('Son',{
template:'#son',
data(){
return {
money:1000,
}
}
});
Vue.component('Girl',{
template:'#girl',
data(){
return {
giveg:0,
}
},
// 定义事件获取拿到父元素的数据
methods:{
get(){
console.log(this);
this.giveg=this.$attrs.givef;
}
}
});
new Vue({
el:"#app"
})
</script>
这段代码主要需要实现:Gril组件获取Son组件中的data数据
- a、Son组件、Gril组件嵌套在Father组建的的模板内，并给两个子组件绑定ref属性
<template id="father">
<div>
<h3>这里是Father组件h3>
<button @click="look">查看father组件中this指向button>
<p> father:{{givef}} p>
<hr>
<Son ref="son">Son>
<hr>
<Girl ref="gril" :givef="givef">Girl>
div>
template>
Vue.component('Father',{
template:'#father',
data(){
return {
givef:0,
}
},
methods:{
look(){
console.log(this)//查看父组件中this指向
//通过父组件的$refs属性拿出money，并存储在父元素中
this.givef=this.$refs.son.money;
}
}
});
我们通过查看父组件中this指向，可以出父组件中有个$ref属性，我们可通过该属性拿到Son
组件的数据，并储存于Father组件中。
- b、将父组件的数据通过单向数据绑定的方式，绑定在Gril组件上。
<Girl ref="gril" :givef="givef">Girl>
- c、在Gril组件内定义事件处理函数，通过触发查看，Gril组件的this指向
<!--Gril组件模板-->
<template id="girl">
<div>
<h3>这里是Girl组件</h3>
<button @click="get">查看gril组件中this指向</button>
<p> {{ giveg }} </p>
</div>
</template>
//Gril组件内事件处理函数
methods:{
get(){
console.log(this);//打印this
this.giveg=this.$attrs.givef;
}
}
通过this指向Gril组件，我们可以查看到，组件内有属性$attrs,属性值为上步中绑定的Father组件中的数据。
- d 最后，只需要通过组件内属性处理，就可以拿到最终数据，并将数据传递给Gril组件内data即可实现最终需求。
this.giveg=this.$attrs.givef;
注意：在Gril组件获得数据前，父组件必须要出发事件，拿到Son组件的数据，不然Gril组件拿不到数据；这种方法可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了
bus总线
- EventBus 又称为事件总线。在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。可以实现非父子组件之间的通信。
- bus事件总线，我们是通过 $on来定义事件， 通过 $emit来触发事件
举个例子：
<body>
<div id="app">
<Bsister>Bsister>
<Ssister>Ssister>
div>
<template id="bsister">
<div>
<h3>这里是Bsister组件h3>
<button @click="give">givebutton>
div>
template>
<template id="ssister">
<div>
<h3>这里是Ssister组件h3>
谢谢p>
div>
template>
body>
<script>
//实现姐姐给妹妹东西，妹妹谢谢的功能
var bus = new Vue();
Vue.component('Bsister',{
template:'#bsister',
methods:{
//定义Ssister的给函数
give(){
bus.$emit('sth');//定义一个触发事件
}
}
});
Vue.component('Ssister' ,{
template:'#ssister',
data(){
return {
flag:false,
}
},
mounted(){//事件挂载结束，真实dom加入页面
var that=this;
bus.$on('sth',function(){//自定义一个事件
that.flag=true;
})
}
})
new Vue({
el:'#app',
})
</script>
我们分析需求：
- 姐姐Bsister组件事件————给妹妹
- 妹妹Ssister组件事件————谢谢(被触发)
- 姐姐给事件触发妹妹事件
- a 、创建一个Vue实例并导出 ，作为事件总线
var bus = new Vue();
- b、通过 o n 来 定 义 事 件 ， 通 过 on来定义事件，通过 on来定义事件，通过emit来触发事件
Vue.component('Bsister',{
template:'#bsister',
methods:{
//定义Ssister的给函数
give(){
bus.$emit('sth');//定义一个触发事件
}
}
});
Vue.component('Ssister' ,{
template:'#ssister',
data(){
return {
flag:false,
}
},
mounted(){//事件挂载结束，真实dom加入页面
var that=this;
bus.$on('sth',function(){//定义一个事件
that.flag=true;
})
}
})
对于组件通信暂时就先总结到这
就先总结前三种组件通信方式了
补充小知识：若new Vue实例中没有el，如何实现实例的挂载
#app实例的手动挂载
new.Vue({
//如果没有el选项
).$mount("#app")
以上仅为个人观点