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代码 < ...
随机推荐
- C#图像处理——ImageProcessor
这是个老生常谈的话题,需求实在太多,而且也较简单,写此文也是因为几个月没写技术文章了,权当为下一步开个头.我之前也做过很多此类项目,但是就我自己来说每次处理方式还都不一样,有用OpenCV的,有用Ma ...
- AspNetCore-MVC实战系列（三）之个人中心
AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...
- 如何高效的进行WebService接口性能测试
版权声明:本文为原创文章,转载请先联系并标明出处 关于接口测试的理解,主要有两类,一类是模块与模块间的调用,此类接口测试应该归属于单元测试的范畴,主要测试模块与模块之间联动调用与返回.此类测试大多关注 ...
- angularjs ng-class
ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 <style> .red { color: red; } .g ...
- 1013 Realtime Status
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- IOS的UITableView
UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...
- 产品经理学Python：for循环、while循环
Python中有两种循环,分别为:for循环和while循环. 1. for循环 for循环可以用来遍历某一对象(遍历:通俗点说,就是把这个循环中的第一个元素到最后一个元素依次访问一次).for循环的 ...
- 【Netty】Netty核心组件介绍
一.前言 前篇博文体验了Netty的第一个示例,下面接着学习Netty的组件和其设计. 二.核心组件 2.1. Channel.EventLoop和ChannelFuture Netty中的核心组件包 ...
- mysql语句优化总结（一）
Sql语句优化和索引 1.Innerjoin和左连接,右连接,子查询 A. inner join内连接也叫等值连接是,left/rightjoin是外连接. SELECT A.id,A.nam ...
- CompletionService 简介
以下是jdk关于CompletionService的简介: public interface CompletionService<V> 将生产新的异步任务与使用已完成任务的结果分离开来的服 ...