详解vue组件通信的三种方式


Posted in Javascript onJune 30, 2017

1. 第一种方式就是官方推荐的

官方推荐方式

有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线。

本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信)

空的Vue实例 bus

import Vue from 'vue'

const bus = new Vue()
export default bus

组件add

<!--html结构-->
<template>
 <div>
  <p>我是add组件的num:{{num}} </p>
  <button @click='add'>增加</button>
 </div>
</template>
// js
<script>
import bus from '../bus.js'
export default {
 data() {
  return {
   num: ''
  }
 },
 methods: {
  add() {
   if (this.num) {
    this.num++
    bus.$emit('num-change', this.num)
   } else {
    this.num = 1
    bus.$emit('num-change', this.num)
   }
  }
 }
}
</script>

组件sub

<!--html结构-->
<template>
 <div>
  <p>我是sub组件的num:{{num}}</p>
 </div>
</template>
// js
<script>
import bus from '../bus.js'
export default {
 data() {
  return {
   num: ''
  }
 },
 created() {
  bus.$on('num-change', num => {
   this.num = num
  })
 }
}
</script>

2.通过vuex来进行状态管理

官方状态管理

vuex我这里就不详细说了,网上教程太多。

3.取巧利用js中的对象的特性(指针)

Object在内存中存储只是保留指针,所以父组件通过props来给兄弟组件传递同一个对象,兄弟组件接收的对象跟父组件的对象都是指向同一个内存地址,故不管在哪里修改都能保持一致。

上代码,父组件把同一个对象传递给add组件和sub组件,那么add组件和sub组件接收到的对象也是指向父组件app的对象都是指向同一个内存地址。add组件对传入的对象进行+1的操作,sub组件进行-1的操作。

父组件 app.vue

<!--html结构-->
<template>
 <div id="app">
  <h1>我是app父组件的newNum:{{share.newNum}}</h1>
  <hr>
  <!--将同一个对象同时传给两个子组件-->
  <addnum :share1='share'></addnum>
  <hr>
  <subnum :share2='share'></subnum>
 </div>
</template>
// js
import addnum from './components/add'
import subnum from './components/sub'

export default {
 data() {
  return {
   share: {
    newNum: 1
   }
  }
 },
 components: {
  addnum, subnum
 }
}

子组件add.vue

<!--html结构-->
<template>
 <div>
  <p>我是add组件的newNum:{{share1.newNum}} </p>
  <button @click='add'>增加</button>
 </div>
</template>
//js
<script>
export default {
 methods: {
  add() {
   this.share1.newNum++
  }
 },
 props: {
  share1: {
   type: Object,
  }
 }
}
</script>

子组件sub.vue

<!--html结构-->
<template>
 <div>
  <p>我是sub组件的newNum:{{share2.newNum}}</p>  
  <button @click='numSub'>减少</button>
 </div>
</template>
// js
<script>
export default {
 methods: {
  numSub() {
   this.share2.newNum--
  }
 },
 props: {
  share2: {
   type: Object,
  }
 }
}
</script>

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

Javascript 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
JavaScript实现瀑布流图片效果
Jun 30 #Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 #Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 #Javascript
jQuery表单设置值的方法
Jun 30 #jQuery
JavaScript注册时密码强度校验代码
Jun 30 #Javascript
Bootstrap Table从零开始
Jun 30 #Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php验证手机号码
2015/11/11 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python实现针对中文排序的方法
2017/05/09 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python利用线程实现多任务
2020/09/18 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
吸烟检讨书2000字
2014/02/13 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
优秀大学生申请书
2019/06/24 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
python创建字典及相关管理操作
2022/04/13 Python
mysql 子查询的使用
2022/04/28 MySQL