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

本文链接：https://blog.csdn.net/csj50/article/details/147796930

接上一篇。

八、事件总线例子

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>

九、Vue归纳

十几个指令（内置指令）
底层原理（响应式、生命周期、两个重要API）
组件化（computed、watch、props、template、data、methods、组件注册、组件命名）
五个内置组件（slot、transtion、component、keep-alive）
逻辑复用技术（自定义组件、混入、过滤器、自定义指令、原型链）
组件间通信方案（9种）