Vue非父子组件通信详解


Posted in Javascript onJune 12, 2017

组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句

Vue非父子组件通信详解

具体如何去实现却没有很详细的说明,于是自己试着进行了实现。先看下简单的通信效果:

Vue非父子组件通信详解

就是点击了一个组件,另一个组件的数字递加。

html如下:

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

再来看一下如何实现每一个组件:

var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

  Vue.component('component-a',{
    template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件incrementB ,因为点击A需要增加B
    data ()  {
      return {
        masgA : 0
      }
    },
    methods: {
      incrementB: function () { //增加B的事件
        bus.$emit('incrementB') //中转站bus 触发incrementB事件
      }
    },
    mounted: function () {
      var _this = this
      bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA,这个事件最终由组件B进行触发
        _this.masgA ++
      })


 //bus.$on('incrementA',()=>{ //这里也可以用箭头函数,就不会有_this这个变量了,因为箭头函数不会改变this指向



 // this.masgA ++



 //})
    }
  })

从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的,同理代component-b也是一样

Vue.component('component-b',{
    template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
    data ()  {
      return {
        masgB : 0
      }
    },
    methods: {
      incrementA: function () {
        bus.$emit('incrementA')
      }
    },
    mounted: function(){
      bus.$on('incrementB',() => {
        this.masgB ++
      })
    }
  })

完整代码如下,可直接复制运行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>非父子组件通信</title>
</head>
<body>
  <div id="app">
    <component-a></component-a>
    <component-b></component-b>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
<script>
  var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

  Vue.component('component-a',{
    template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件
    data ()  {
      return {
        masgA : 0
      }
    },
    methods: {
      incrementB: function () {
        bus.$emit('incrementB')
      }
    },
    mounted: function () {
      var _this = this
      bus.$on('incrementA',function(){
        _this.masgA ++
      })
      bus.$on('incrementA',()=>{
        this.masgA ++
      })
    }
  })

  Vue.component('component-b',{
    template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
    data ()  {
      return {
        masgB : 0
      }
    },
    methods: {
      incrementA: function () {
        bus.$emit('incrementA')
      }
    },
    mounted: function(){
      bus.$on('incrementB',() => {
        this.masgB ++
      })
    }
  })

  var vm = new Vue({
    el: "#app"
  })
</script>

同时也可以看出这么做仅有两个组件就有些麻烦,事件的流向不是很清晰,所以在出现复杂的场景时需要使用VueX进行管理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
jquery实现图片切换代码
Oct 13 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 #Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 #Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 #Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 #Javascript
前端构建工具之gulp的语法教程
Jun 12 #Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 #Javascript
You might like
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
pip安装python库的方法总结
2019/08/02 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python软件都是免费的吗
2020/06/18 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
.net面试题
2015/12/22 面试题
土建资料员岗位职责
2014/01/04 职场文书
年会活动策划方案
2014/01/23 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
新员工辞职信范文
2015/05/12 职场文书
大学生活感想
2015/08/10 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL