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进行管理。
本文结束，有任何不同的意见欢迎在留言区讨论。
注：本文出自博客园http://www.cnblogs.com/mdengcc/ 转载请注明出处
Vue 非父子组件通信的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- 详解Vue 非父子组件通信方法（非Vuex）
假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
随机推荐
- MAC Mysql 重置密码
使用mac电脑,当mysql登录密码忘记时,需要重置密码.步骤如下: 1. 关闭当前正在运行的mysql进程. A.进入"偏好设置",选择mysql, 再选"stop m ...
- onmouseover事件
根据教学视频写了个onmouseover事件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- BackgroundWorker的DoWork方法中发生异常无法传递到RunWorkedCompleted方法
在使用C#的BackgroundWorker时需要在UI界面上显示DoWork中发生的异常,但怎么调试都无法跳转到界面上,异常也不会传递到RunWorkerCompleted方法中(e.Error为空 ...
- bzoj1087 [SCOI2005]互不侵犯
Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包 ...
- wcf发布的服务在前端调用时，遇到跨域问题的解决方案
我是使用IIS作为服务的宿主,因此需要在web.config中增加如下配置节: <bindings> <webHttpBinding> <binding name=&qu ...
- 【算法系列学习】codeforces D. Mike and distribution 二维贪心
http://codeforces.com/contest/798/problem/D http://blog.csdn.net/yasola/article/details/70477816 对于二 ...
- JS判断当前手机类型
window.onload = function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.ind ...
- pthread的lowlevellock
pthread的lowlevellock是futex的最简单的锁应用.也是pthread其它同步原语最基本的锁.lowlevellock提供(或实现)了三种锁(方法),一是基于0或1的互斥的锁规则,二 ...
- Thinkphp3.2学习——架构_URL模式
入口文件是应用的单一入口,对应用的所有请求都定向到应用入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作: http://serverName/index.php/模块/控制器/操作 这是 ...
- JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(三)，多线程断点下载
一 前言 本篇博客是<JWebFileTrans(JDownload):一款可以从网络上下载文件的小程序>系列博客的第三篇,本篇博客的内容主要是在前两篇的基础上增加多线程的功能.简言之,本 ...