详解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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
js实现一键复制功能
Mar 16 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
vue无限轮播插件代码实例
May 10 Javascript
原生js实现点击轮播切换图片
Feb 11 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
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
prototype 的说明 js类
2006/09/07 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
React 组件间的通信示例
2018/06/14 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
Python 装饰器使用详解
2017/07/29 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
django中的图片验证码功能
2019/09/18 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
自我鉴定怎么写
2014/01/12 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python