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 While 循环基础教程
Apr 05 Javascript
Table冻结表头示例代码
Aug 20 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
详解React之key的使用和实践
Sep 29 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php网站地图生成类示例
2014/01/13 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php blowfish加密解密算法
2016/07/02 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python 计算文件的md5值实例
2017/01/13 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
工程部经理岗位职责
2013/12/08 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
节电标语大全
2014/06/23 职场文书
六年级小学生评语
2014/12/26 职场文书
大学生实习介绍信
2015/05/05 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript