详解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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
JavaScript实现前端倒计时效果
Feb 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
PHP DataGrid 实现代码
2009/08/12 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
php实用代码片段整理
2016/11/12 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Node.js插件的正确编写方式
2014/08/03 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python logging设置和logger解析
2019/08/28 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
在python3中实现更新界面
2020/02/21 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
经济系大学生求职信
2013/10/01 职场文书
房地产还款计划书
2014/01/10 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
物业管理工作方案
2014/05/10 职场文书
家电创业计划书
2019/08/05 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
JavaScript实现简单拖拽效果
2021/09/15 Javascript