Vue非父子组件通信详解
时间:2019-03-30
本文章向大家介绍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进行管理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Selenium2+python自动化63-二次封装(click/send_kesy)
- Selenium2+python自动化65-js定位几种方法总结
- HDU 2502 月之数(二进制,规律)
- Tensorflow实战系列:手把手教你使用CNN进行图像分类(附完整代码)
- HDU 2503 a/b + c/d(最大公约数与最小公倍数,板子题)
- python接口自动化6-重定向(Location)
- 2017广东工业大学程序设计竞赛初赛 题解&源码(A,水 B,数学 C,二分 D,枚举 E,dp F,思维题 G,字符串处理 H,枚举)
- python接口自动化7-参数关联
- 深度学习GPU环境Ubuntu16.04+GTX1080+CUDA9+cuDNN7+TensorFlow1.6环境配置
- python接口自动化8-参数化
- HDU 2037 今年暑假不AC(贪心,区间更新,板子题)
- “玲珑杯”ACM比赛 Round #13 题解&源码
- 回溯算法入门及经典案例剖析(初学者必备宝典)
- Selenium2+python自动化66-装饰器之运行失败截图
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- OpenCV图像处理笔记(一):图片基本操作
- BigData--Hadoop2.x新特性之HA
- 前端踩坑系列《四》
- BigData--Hadoop技术
- TensorFlow2.X学习笔记(8)--TensorFlow高阶API之构建模型、训练模型
- dotnet 使用 AsyncQueue 创建高性能内存生产者消费者队列
- TensorFlow2.X学习笔记(7)--TensorFlow中阶API之losses、metrics、optimizers、callbacks
- 前端须知的 Cookie 知识小结
- TensorFlow2.X学习笔记(6)--TensorFlow中阶API之特征列、激活函数、模型层
- sortable.js——Vue 数据更新问题
- 【项目实战】环境搭建
- TensorFlow2.X学习笔记(5)--TensorFlow中阶API之数据管道
- TensorFlow2.X学习笔记(4)--TensorFlow低阶API之AutoGraph相关研究
- TensorFlow2.X学习笔记(3)--TensorFlow低阶API之张量
- TensorFlow2.X学习笔记(2)--TensorFlow的层次结构介绍