详解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 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
ionic3 懒加载
Aug 16 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
浅谈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输出Excel文件类
2010/02/08 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
python多线程操作实例
2014/11/21 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python Pillow Image Invert
2019/01/22 Python
Python3多线程基础知识点
2019/02/19 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python操作Excel的学习笔记
2021/02/18 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
2014年教育培训工作总结
2014/12/08 职场文书
小学总务工作总结
2015/08/13 职场文书
Django框架中模型的用法
2022/06/10 Python