vue组件之间通信的8种方式

梦里梦外; 2022-10-23 12:41 270阅读 0赞

# [vue组件之间通信的8种方式][vue_8] #

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

*  props和$emit(常用)
 *  $attrs和$listeners
 *  中央事件总线（非父子组件间通信）
 *  v-model
 *  provide和inject
 *  $parent和$children
 *  vuex

**1.props和$emit**

父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 Vue.component('child',{
     2     data(){
     3       return {
     4         mymessage:this.message
     5       }
     6     },
     7     template:`
     8       <div>
     9         <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
    10     `,
    11     props:['message'],//设置props属性值，得到父组件传递过来的数据
    12     methods:{
    13       passData(val){
    14         //触发父组件中的事件，向父组件传值
    15         this.$emit('getChildData',val)
    16       }
    17     }
    18   })
    19   Vue.component('parent',{
    20     template:`
    21       <div>
    22         <p>this is parent compoent!</p>
    23         <child :message="message" v-on:getChildData="getChildData"></child>
    24       </div>
    25     `,
    26     data(){
    27       return {
    28         message:'hello'
    29       }
    30     },
    31     methods:{
    32       //执行子组件触发的事件
    33       getChildData(val){
    34         console.log(val)
    35       }
    36     }
    37   })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

在上面的例子中，有父组件parent和子组件child。

1).父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

**2.$attrs和$listeners**

第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？ 如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 Vue.component('C',{
     2     template:`
     3       <div>
     4         <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
     5     `,
     6     methods:{
     7       passCData(val){
     8         //触发父组件A中的事件
     9         this.$emit('getCData',val)
    10       }
    11     }
    12   })
    13   Vue.component('B',{
    14     data(){
    15       return {
    16         mymessage:this.message
    17       }
    18     },
    19     template:`
    20       <div>
    21         <input type="text" v-model="mymessage" @input="passData(mymessage)">
    22         
    23         
    24         <C v-bind="$attrs" v-on="$listeners"></C>
    25       </div>
    26     `,
    27     props:['message'],//得到父组件传递过来的数据
    28     methods:{
    29       passData(val){
    30         //触发父组件中的事件
    31         this.$emit('getChildData',val)
    32       }
    33     }
    34   })
    35   Vue.component('A',{
    36     template:`
    37       <div>
    38         <p>this is parent compoent!</p>
    39         <B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
    40       </div>
    41     `,
    42     data(){
    43       return {
    44         message:'hello',
    45         messagec:'hello c' //传递给c组件的数据
    46       }
    47     },
    48     methods:{
    49       getChildData(val){
    50         console.log('这是来自B组件的数据')
    51       },
    52       //执行C子组件触发的事件
    53       getCData(val){
    54         console.log("这是来自C组件的数据："+val)
    55       }
    56     }
    57   })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

** 3. 中央事件总线**

上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

Vue.component('brother1',{
        data(){
          return {
            mymessage:'hello brother1'
          }
        },
        template:`
          <div>
            <p>this is brother1 compoent!</p>
            <input type="text" v-model="mymessage" @input="passData(mymessage)">
          </div>
        `,
        methods:{
          passData(val){
            //触发全局事件globalEvent
            bus.$emit('globalEvent',val)
          }
        }
      })
      Vue.component('brother2',{
        template:`
          <div>
            <p>this is brother2 compoent!</p>
            <p>brother1传递过来的数据：{
      {brothermessage}}</p>
          </div>
        `,
        data(){
          return {
            mymessage:'hello brother2',
            brothermessage:''
          }
        },
        mounted(){
          //绑定全局事件globalEvent
          bus.$on('globalEvent',(val)=>{
            this.brothermessage=val;
          })
        }
      })
      //中央事件总线
      var bus=new Vue();
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <brother1></brother1>
            <brother2></brother2>
          </div>
        `
      })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

**4. provide和inject**

在 Vue.js 的 `2.2.0+` 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 Vue.component('child',{
     2     inject:['for'],//得到父组件传递过来的数据
     3     data(){
     4       return {
     5         mymessage:this.for
     6       }
     7     },
     8     template:`
     9       <div>
    10         <input type="tet" v-model="mymessage">
    11       </div>
    12   })
    13   Vue.component('parent',{
    14     template:`
    15       <div>
    16         <p>this is parent compoent!</p>
    17         <child></child>
    18       </div>
    19     `,
    20     provide:{
    21       for:'test'
    22     },
    23     data(){
    24       return {
    25         message:'hello'
    26       }
    27     }
    28   })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

**5. v-model**

**　**　父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

Vue.component('child',{
        props:{
          value:String, //v-model会自动传递一个字段为value的prop属性
        },
        data(){
          return {
            mymessage:this.value
          }
        },
        methods:{
          changeValue(){
            this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
          }
        },
        template:`
          <div>
            <input type="text" v-model="mymessage" @change="changeValue">
          </div>
      })
      Vue.component('parent',{
        template:`
          <div>
            <p>this is parent compoent!</p>
            <p>{
      {message}}</p>
            <child v-model="message"></child>
          </div>
        `,
        data(){
          return {
            message:'hello'
          }
        }
      })
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <parent></parent>
          </div>
        `
      })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

** 6. $parent和$children**

在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

Vue.component('child',{
        props:{
          value:String, //v-model会自动传递一个字段为value的prop属性
        },
        data(){
          return {
            mymessage:this.value
          }
        },
        methods:{
          changeValue(){
            this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
          }
        },
        template:`
          <div>
            <input type="text" v-model="mymessage" @change="changeValue">
          </div>
      })
      Vue.component('parent',{
        template:`
          <div>
            <p>this is parent compoent!</p>
            <button @click="changeChildValue">test</button >
            <child></child>
          </div>
        `,
        methods:{
          changeChildValue(){
            this.$children[0].mymessage = 'hello';
          }
        },
        data(){
          return {
            message:'hello'
          }
        }
      })
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <parent></parent>
          </div>
        `
      })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

**7. vuex处理组件之间的数据交互**

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

参考链接：https://my.oschina.net/u/3982182/blog/3019264

[vue_8]: https://www.cnblogs.com/barryzhang/p/10566515.html
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221023/32962f6ae0894cca82cf208fb0c57d4b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件之间通信的8种方式

[vue组件之间通信的8种方式][vue_8] 对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。 props和$emi

梦里梦外;/ 2022年10月23日 12:41/ 0 赞/ 271 阅读

相关 Vue组件间通信6种方式

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 摘要：总有一款合适的通信方式。作者：[浪里行

末蓝、/ 2022年10月01日 15:41/ 0 赞/ 266 阅读

相关【Vuejs】1025- Vue 组件通信的 8 种方式

前言 > ❝ > > 做了半年的公司系统，终于就在前天上线了。后期改BUG时间拖得太长了，出现的大部分BUG 是前端与后端信息不对称导致的，逻辑性错误不怎么多，业

我就是我/ 2022年08月31日 00:53/ 0 赞/ 256 阅读

相关 vue组件之间的通信

VUE组件之间的传递数据是很重要，坑也很多，一，父组件向子组件传值 1.创建子组件，在src / components /文件夹下新建一个Child.vue

逃离我推掉我的手/ 2022年05月25日 06:13/ 0 赞/ 316 阅读

相关 vue组件之间8种组件通信方式总结

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有8种方式。 1.props和$emit 父组件向子组件传递数据是通过p

落日映苍穹つ/ 2022年03月06日 06:26/ 0 赞/ 298 阅读

相关 vue组件之间8种组件通信方式总结

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有8种方式。 1.props和$emit 父组件向子组件传递数据是通过p

今天药忘吃喽~/ 2022年03月06日 06:26/ 0 赞/ 285 阅读

相关 vue组件通信的几种方式

vue组件通信 1. 父传子 // 父组件 Parent <template> <div> <Child1 :title=

刺骨的言语ヽ痛彻心扉/ 2021年12月19日 23:19/ 0 赞/ 309 阅读

相关 vue组件之间的通信

一、props/$emit 缺点：不能兄弟之间通信父组价通过props向子组件传递消息。父组件 <template> <div cla

柔情只为你懂/ 2021年11月24日 00:36/ 0 赞/ 400 阅读

相关 vue组件之间的通信

作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex)。通信方式根据组件之间的关系有不同之处。组件关系有下面三种：父-->子、子-->父、非父子父-->子

小咪咪/ 2021年07月26日 19:52/ 0 赞/ 570 阅读

相关 Vue组件通信的六种方式

Vue组件通信的六种方式在平时的开发过程中，父子 / 兄弟组件间的通信是肯定会遇到的啦，所以这里总结了 6 种 Vue 组件的通信props / $e$emit / V...

红太狼/ 2020年06月23日 16:43/ 0 赞/ 871 阅读