详解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实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
很可爱的输入框
Aug 03 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
vue购物车插件编写代码
Nov 27 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
十天学会php之第九天
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php header函数的常用http头设置
2015/06/25 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
PDO::commit讲解
2019/01/27 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
复习Python中的字符串知识点
2015/04/14 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
大学三年的自我评价
2013/12/25 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
环保建议书
2014/03/12 职场文书
教师师德考核自我评价
2014/09/13 职场文书
文员岗位职责
2015/02/04 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis