<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.app {
display: flex;
}
.app div {
flex: 1;
}
</style>
</head>
<body>
<div id='app' class='app'>
<div>
<child-a></child-a>
</div>
<div>
<child-b></child-b>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 事件总线,通过“订阅-发布”模式实现组件之间的直接通信
1.首先创建一个空的vue实例
var bus = new Vue()
它身上有两个方法实现组件之间的通信,bus.$emit(频道,数据)定义 在组件的methods中,用来向其他组件发送消息,bus.$on(频道,数据)用来接收其他组件发来的消息,定义在生命周期的created或者mounted钩子函数中。
// bus.$emit('频道') 发送消息
// bus.$on('频道') 收到消息
当两个组件发送数据的频道和接收消息的频道相同就可以实现组件之间的双向通信了
Vue.component('child-a', {
data: function() {
return {
msg: '',
html: ''
}
},
template:`
<div>
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
//给输入框和button按钮都绑定send事件,当监听到键盘enter事件或按钮点击事件,执行事件函数send
<div v-html='html'></div>
</div>
`,
methods: {
send() {
// 发送消息
bus.$emit('A', this.msg)
子组件a广播了一件非定向消息,消息内容为msg,msg就是输入框中的内容。广播频道为A,
子组件b要接收这条消息,就要监听广播频道A
this.msg = ''
}
},
created() {
var that = this
普通函数会改变this指向
bus.$on('B', function(msg) {
子组件a监听频道B的消息,并执行回调函数,将消息内容渲染到div中
that.html += '<div>B说:'+msg+'</div>'
that指向组件实例,可以调用组件上的属性和方法
})
}
})
Vue.component('child-b', {
data: function() {
return {
msg: '',
html: ''
}
},
template:`
<div>
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
<div v-html='html'></div>
</div>
`,
methods: {
send() {
bus.$emit('B', this.msg)
this.msg = ''
}
},
created() {
var that = this
bus.$on('A', function(msg) {
//监听的频道,收到消息后的回调函数
that.html += '<div>A说:'+msg+'</div>'
})
}
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
vue-bus 事件总线
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 这个插件可以在可以在所有的组件之间随意使用 在main.js中使用插件: 使用vue-bus有两点需要注意,第一是...
- 需求 vue兄弟组件或者互不关联的组件间的通讯 基本实现原理 使用bus总线eventbus来实现,很简单 上代码...
- 概览 案例 事件发布前置条件IDL定义关键性配置发布任务服务实现事件发布 事件订阅依赖作为订阅者 既是事件发送者,...