当前位置：首页 > news >正文

前端基础之《Vue（15）—组件通信（2）》

news 来源：原创 2025/5/9 8:06:21

接上一篇。

八、事件总线例子

1、什么是事件总线
const bus = new Vue()，不给选项就是事件总线，给选项就是组件了。

事件总线函数：
（1）bus.$on('频道', callback)：监听一个“频道”
（2）bus.$emit('频道', '消息')：向指定“频道”上发送消息
（3）bus.$off()：取消订阅“频道”
（4）bus.$once()：对某个“频道”只监听一次

2、什么是“订阅-发布”模式
这里的事件总线，就是一种“订阅-发布”模式。
在Vue的背后源码中的Dep类也是一种“订阅-发布”模式。
“订阅-发布”模式，也叫做“观察者模式”。

3、代码

<html>
<head><title>组件通信-事件总线</title><style>.row {line-height: 22px;}</style>
</head>
<body><div id="app"><comp-teacher></comp-teacher><hr><comp-student></comp-student></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const bus = new Vue() // 事件总线（事件系统）Vue.component('comp-teacher', {template: `<div><h2>老师在线</h2><input type="text" v-model='msg' @keyup.enter='send' /><button @click='send'>发送消息</button><div v-html='content'></div></div>`,data() {return {msg: '',content: ''}},methods: {send() {// 使用事件总线向qqq频道上发送消息bus.$emit('qqq', this.msg)this.msg = ''}},mounted() {bus.$on('stu', msg=>{this.content += `<div class='row'>学生说：${msg}</div>`})}})Vue.component('comp-student', {template: `<div><h2>学生在线</h2><input type="text" v-model='msg' @keyup.enter='send' /><button @click='send'>发送消息</button><div v-html='content'></div></div>`,data() {return {msg: '',content: ''}},methods: {send() {// 学生发消息bus.$emit('stu', this.msg)this.msg = ''}},mounted() {// 使用事件总线，监听qqq这个频道bus.$on('qqq', msg=>{console.log('student---qqq频道上有消息来了', msg)this.content += `<div class='row'>老师说：${msg}</div>`})}})const app = new Vue({})app.$mount('#app')</script></body>
</html>