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

最新推荐文章于 2024-05-26 11:16:00 发布

阿喵~~

最新推荐文章于 2024-05-26 11:16:00 发布

阅读量926

点赞数

分类专栏：整理文章标签： Vue 组件的通信方式（父子通信、子父通信，非子父（ref链、bus总

本文链接：https://blog.csdn.net/qq_40616529/article/details/93760204

版权

整理专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

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

二、组件的通信方式分类

父子组件通信
- 使用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>

子父通信主要运用自定事件完成，通过 $o n 定义，$ 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、通过 $o n 来定义事件，通过$ 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")

以上仅为个人观点

阿喵~~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件的通信方式（父子通信、子父通信，非子父（ref链、bus总线)）

一、为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信二、组件的通信方式分类父子组件通信使用props实现子父组件通信通过自定义事件实现非父子组件通信通过ref链:可以实现非父子组件的通信，但是如果层级太多，就比较繁琐bus事件总线多组件状态共享（多个组件共用同...
复制链接

扫一扫

专栏目录