详解Vue组件之间通信的七种方式


Posted in Javascript onApril 14, 2019

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。

父子组件之间的通信

1)props和$emit

父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:

  

```
    // 父组件
    <template>
      <div>
        <h3>props和$emit</h3>
        <Children v-on:changeMsg="changeMsg" :msg="msg"/>
      </div>
    </template>
    <script>
    import Children from './children';
    export default {
      data() {
        return {
          msg: '传递的值'
        }
      },
      components: {
        Children
      },
      methods: {
        changeMsg(val) {
          this.msg = val;
        }
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <h3 @click="notify">{{msg}}</h3>
      </div>
    </template>
    
    <script>
    export default { 
      data(){
        return {
    
        }
      }, 
      props: ['msg'],
      methods: {
        notify() {
          this.$emit('changeMsg', '修改后的');
        }
      }
    }
    </script>
  ```

2)vm.$parent和vm.$children

vm.$parent: 父实例,如果当前实例有的话

vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的

具体代码如下:

  

```
    // 父组件的代码
    <template>
      <div>
        <h3>{{title}}</h3>
        <button @click="amend">在父组件中修改子组件的标题</button>
        <Children />
      </div>
    </template>
    
    <script>
    import Children from './children.vue';
    export default {
      data() {
        return {
          title: '父组件'
        }
      },
      components: {
        Children
      },
      methods: {
        amend() {
          this.$children[0].title = '修改后的子组件标题';
        }
      }
    }
    </script>
    // 子组件的代码
    <template>
      <div>
        <h3>{{title}}</h3>
        <button @click="amend">在子组件中修改父组件的标题</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: '子组件'
        }
      },
      methods: {
        amend() {
          this.$parent.title = '修改后的父组件标题';
        }
      }
    }
    </script>
  ```

3)自定义事件的v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具体代码如下:

  

```
    // 父组件
    <template>
      <div>
        标题:<input type="text" v-model="mymessage"><br />
        <Children v-model="mymessage" />
      </div>
    </template>
    
    <script>
    import Children from './children.vue';
    export default {
      data() {
        return {
          mymessage: '名字',
        }
      },
      components: {
        Children
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <input type="text" :value="mymessage" @input="changeValue"> 
      </div>
    </template>
    
    <script>
    export default {
      model: {
        prop: 'mymessage',
        event: 'input'
      },
      props: ['mymessage'],
      methods: {
        changeValue(event){
          this.$emit('input', event.target.value);
        }
      }
    }
    </script>
  ```

祖先组件和其子孙组件通信

1)provide/inject

provide/inject,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效

https://cn.vuejs.org/v2/api/#provide-inject     

具体代码如下:

   

```
    // 父组件
    <template>
      <div>
        <h3>{{title}}</h3>
        <Children />
      </div>
    </template>
    
    <script>
    import Children from './children.vue';
    export default {
      data() {
        return {
          title: '父组件的标题'
        }
      },
      provide() {
        return {
          updateTitle: this.updateTitle
        }
      },
      methods: {
        updateTitle(title) {
          this.title = title;
        }
      },
      components: {
        Children
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <button @click="changeAttr">修改父组件的属性</button>
        <Grandson />
      </div>
    </template>
    
    <script>
    import Grandson from './grandson.vue';
    export default {
      data() {
        return {
          
        }
      },
      inject: ['updateTitle'],
      methods: {
        changeAttr() {
          this.updateTitle('子组件修改标题');
        }
      },
      components: {
        Grandson
      }
    }
    </script>
    // 孙组件
    <template>
      <div>
        <button @click="changeAttr">修改祖先组件的属性</button>
      </div>
    </template>
    
    <script>
    export default {
      inject: ['updateTitle'],
      methods: {
        changeAttr() {
          this.updateTitle('孙组件修改标题');
        }
      }
    }
    </script>
  ```

2)$attrs和$listeners

组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。

vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性),这里会包含所有父作用域的绑定 ,并且可以通过 v-bind="$attrs" 传入内部组件

vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

https://cn.vuejs.org/v2/api/#vm-attrs

具体代码如下:

```
  // 父组件
  <template>
    <div>
      <Children :msg="msg" v-on:changeMsg="changeMsg"/>
    </div>
  </template>
  
  <script>
  import Children from './children';
  export default {
    data() {
      return {
        msg: '下发数据',
        test: '123'
      }
    },
    components: {
      Children
    },
    methods: {
      changeMsg() {
        this.msg = '修改后的数据';
      }
    }
  }
  </script>
  // 子组件
  <template>
    <div>
      <Grandson v-bind="$attrs" v-on="$listeners"/>
    </div>
  </template>
  
  <script>
  import Grandson from './grandson';
  export default {
    components: {
      Grandson
    }
  }
  </script>
  // 孙组件
  ```
    <template>
      <div>
        <h3>{{$attrs.msg}}</h3>
        <button @click="change">修改数据</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
    
        }
      },
      methods: {
        change() {
          this.$emit('changeMsg')
        }
      }
    }
    </script>

  ```
```

非父子组件之间的通信

通过中央事件总线来进行通信

通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。

具体代码如下:

```
    // 父组件
    <template>
      <div>
        <One />
        <Two />
      </div>
    </template>
    <script>
    import One from './one.vue';
    import Two from './two.vue';
    export default {
      data() {
        return {
        }
      },
      components: {
        One,
        Two
      }
    }
    </script>
    // one组件
    <template>
      <div>
        <h3>第一个组件</h3>
        <button @click="add">增加数量</button>
      </div>
    </template>
    <script>
    import {BUS} from './index.js';
    export default {
      data() {
        return {
        }
      },
      methods: {
        add() {
          BUS.$emit('add');
        }
      },
      beforeDestory() {
        BUS.$off('add');
      }
    }
    </script>
    // two组件
    <template>
      <div>
        <h3>第二个组件</h3>
        <h3>数量: {{num}}</h3>
      </div>
    </template>
    <script>
    import {BUS} from './index.js';
    export default {
      data() {
        return {
          num: 1
        }
      },
      mounted() {
        BUS.$on('add', () => {
          this.num += 1;
        })
      },
      beforeDestroy() {
        BUS.$off('add');
      }
    }
    </script>
    // index.js 创建的bus
    import Vue from 'vue';
    export const BUS = new Vue({
    }) 
  ```

通过vuex来进行数据管理,具体内容见vuex官网

如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。

总结

以上所述是小编给大家介绍的Vue组件之间通信的七种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
采用call方式实现js继承
May 20 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 #Javascript
详解如何理解vue的key属性
Apr 14 #Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 #Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 #Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 #Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
You might like
php中截取字符串支持utf-8
2007/01/18 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php实现图片缩略图的方法
2016/03/29 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python生成器generator原理及用法解析
2020/07/20 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
5.12护士节活动总结
2015/02/10 职场文书
天那边观后感
2015/06/09 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
小程序实现侧滑删除功能
2022/06/25 Javascript