您的位置：首页 > Web前端 > Vue.js

Vue 组件的通信方式（父子通信、子父通信，非子父（ref链、bus总线)）

2019-06-26 18:27 603 查看

一、为什么要进行组件通信？

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信

二、组件的通信方式分类

  • 父子组件通信 使用props实现
  • 子父组件通信
      通过自定义事件实现
  • 非父子组件通信
      通过ref链:可以实现非父子组件的通信，但是如果层级太多，就比较繁琐
    • bus事件总线
  • 多组件状态共享（ 多个组件共用同一个数据 ）(vuex)
      vuex实现

    我们通过代码来具体来看一下这几种通信方式实现方式以及步骤

    1、父子组件通信

    通过props实现的方式,下面是一个简单完整示例

    <body>
<div id="app">
<Father></Father>
</div>

<!--创建两个组件模板-->
<template id="father">
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
</div>
</template>

<template id="son">
<div>
<h3> 这里是son组件 </h3>
<p> 父亲给了我  {{ aa }}  元 </p>
<p> {{ maskFlag }} </p>
</div>
</template>
</body>
    <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、在父组件的模板中将数据用单向数据绑定的姓氏，绑定在子组件身上
      <Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
//子组件嵌套在父组件内，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>

    子父通信主要运用自定事件完成，通过on定义，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>
<!-- father组件中refs属性 -->
<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>
<!-- father组件中refs属性 -->
<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">give</button>
</div>

</template>

<template id="ssister">
<div>
<h3>这里是Ssister组件</h3>
<p v-show= "flag">谢谢</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、通过 on来定义事件，通过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")

    以上仅为个人观点

    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航