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 select下拉框操作常用方法
Nov 09 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
ES6中Class类的静态方法实例小结
Oct 28 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue slot用法(小结)
Oct 22 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 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
服务器web工具 php环境下
2010/12/29 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php数组转成json格式的方法
2015/03/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python之os操作方法(详解)
2017/06/15 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
施工员岗位职责范本
2015/04/11 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python