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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
javascript中clone对象详解
Dec 03 Javascript
微信jssdk用法汇总
Jul 16 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
小程序转发探索示例
Feb 19 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
vue实现树状表格效果
Dec 29 Vue.js
详解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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP时间处理类操作示例
2018/09/05 PHP
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
详解Python中的多线程编程
2015/04/09 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python字符编码判断方法分析
2016/07/01 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python扫描线填充算法详解
2020/02/19 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
为什么称python为胶水语言
2020/06/16 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
迎新生标语大全
2014/10/06 职场文书
小学语文复习计划
2015/01/19 职场文书
小班上学期个人总结
2015/02/12 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL