方式一:bus中央总线
利用总线方式可以平级组件进行通信
无论是父向子传值还是子向父传值,都需要一个中间介质。对于平级组件来说其实也一样,他们也需要一个中间介质来作为一个中央事件总线。
第一步:我们先来创建中央事件总线,在src/assets/下创建一个bus.js,内容如下
import Vue from 'vue'
export default new Vue();
eventBus.js中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。
bus.$on('事件名称',function(msg) {
// 回调函数
})$emit:实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。
bus.$emit('事件名称', 传参)
第二步:创建一个firstChild组件,引入eventBus这个事件总线,接着添加一个按钮并绑定一个点击事件
firstChild.vue
<template>
<div class="firstChild">
<h2>子1</h2>
<button @click="sendMsg">向兄弟2中传值</button>
</div>
</template>
<script>
import bus from './bus';//引入中央总线Vue实例
export default {
data() {
return {
msg: '向兄弟2中传值'
}
},
methods: {
sendMsg() {
/**
* $emit()触发事件并传值
*/
bus.$emit('userDefindEvent', this.msg)
}
}
}
</script>
我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件,并传递了一个字符串参数
$emit:实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。
第三步:我们再创建一个secondChild组件,引入eventBus事件总线,并用一个p标签来显示传递过来的值
secondChild.vue
<template>
<div class="secondChild">
<h2>子2</h2>
<p>从firstChild接收的字符串参数:{{msg}}</p>
</div>
</template>
<script>
import bus from './bus';
export default {
data() {
return {
msg: '默认值'
}
},
mounted() {
let _this = this
//定义监听事件
bus.$on('userDefindEvent',function(msg) {
_this.msg = msg
})
}
}
</script>
我们在mounted中,监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数
PS:
mounted:是一个Vue生命周期中的钩子函数,简单点说就类似于jquery的ready,Vue会在文档加载完毕后调用mounted函数。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。
第四步:创建一个parent父组件,在父组件中,注册这两个组件,并添加这两个组件的标签
parent.vue
<template>
<div class="parent">
<h1>中央总线通信</h1>
<first-child></first-child>
<second-child></second-child>
</div>
</template>
<script>
import firstChild from './firstChild';
import secondChild from './secondChild'
export default {
data() {
return {
}
},
components: {
firstChild,secondChild
}
}
</script>
总结:
- 创建一个事件总线,例如demo中的bus.js,用它作为通信桥梁
- 在需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数
- 在需要接收的组件生命周期mounted中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数
eventBus原理是什么?为什么可以实现组件间的状态共享?它是什么模式?发布者订阅者分别是做什么的?vue的eventbus如何实现?
答案eventBus是一个典型的发布-订阅模式,当状态改变时候,改变方通过eventBus发布状态改变事件,关心这个状态的组件可以通过订阅该事件来获知最新的状态,这样就实现组件通信,即组件间的状态共享。
Vue项目中可以通过简单地实例化一个Vue对象来实现一个eventBus:const eventBus = new Vue();然后使用实例提供的方$on()法订阅,使用$emit()方法实现发布。另外可以通过$off()解绑事件。
方式二:消息订阅与发布(PubSubJS 库)
pubsub的优点:组件之间的通信没有任何位置的限制
首先安装pubsub-js库
npm install pubsub-js --sava
pubsub有两个方法:
PubSub.publish('发布的消息名','提供给订阅者的参数') //发布消息 ==>触发事件 比如点击事件
举例:PubSub.publish('infomation_1',data)
PubSub.subscribe('发布的消息名',事件的监听函数) //订阅消息 ==>绑定事件监听 获取消息
举例:PubSub.subscribe('infomation_1',function(msg,data){
})
案例:
父组件parent.vue
<template>
<div class="parent">
<h1>消息订阅与发布PubSub</h1>
<first-child></first-child>
<second-child></second-child>
</div>
</template>
<script>
import firstChild from './firstChild'
import secondChild from './secondChild'
export default {
data() {
return {
}
},
components: {
firstChild,secondChild
}
}
</script>
子组件firstChild.vue ---发布消息
<template>
<div class="firshChild">
<h2>子1</h2>
<button @click="sendMsg">向secondChild中传值</button>
</div>
</template>
<script>
// 引入pubsub-js插件
import PubSub from 'pubsub-js'
export default {
data() {
return {
msg: 'muzidigbig'
}
},
methods: {
sendMsg() {
PubSub.publish('userEvent',this.msg); //发布消息
}
}
}
</script>
子组件secondChild.vue ---订阅消息
<template>
<div class="secondChild">
<h2>子2</h2>
<p>firshChild传过来的数据:{{msgg}}</p>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
data() {
return {
msgg: ''
}
},
mounted() {
// 订阅消息
PubSub.subscribe('userEvent',(name,data) => {
this.msgg = data
})
}
}
</script>
注意
1) 优点: 此方式可实现任意关系组件间通信(数据)
方式三:Vue.observable
// utils.js 文件
import Vue from 'vue'
// 创建响应式对象
export const state = Vue.observable({
count: 1
})
export const mutations = Vue.observable({
increase() {
state.count++
}
})
// 在 vue 文件中使用
<template>
<div id="app">
<button @click="increaseCount">+</button>
{{ num }}
</div>
</template>
<script>
import { state, mutations } from '@/utils/index'
export default {
name: 'App',
computed: {
num() {
return state.count
}
},
methods: {
increaseCount: mutations.increase
}
}
</script>