非模块化 Vue 开发的 bus 总线通信

news2025/1/12 9:38:46

个人感觉，JavaScript 非模块开发更适合新人上手，不需要安装配置一大堆软件环境，不需要编译，适合于中小项目开发，只需要一个代码编辑器即可开发，例如 vsCode。网页 html 文件通过 script 标签引入 JavaScript 脚本即可运行于各种浏览器，搭载一些 vue 常用工具，如 httpVueLoader 和 vue-router 工具，可以轻松实现 Vue 组件化以及路由功能，本文先练习一下 Vue 组件间的总线通信传值方式，组件的父子传值默认单向的 props，总线通信则不受组件级别影响，可以任意传递信息。
非模块化的 vue 已经集成了 bus 通信，使用起来甚至比模块化的 vue 还简便，不需要引用多余文件，接收信息用 this. $o n ，发送信息用 v m .$ emit 即可实现全局通信。

主文件 index.html 如下，（接收 m2.vue 发来的消息）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/framework/vue-2.7.16.min.js"></script>
    <script src="/framework/httpVueLoader.min.js"></script>
    <title>非模块化 Vue 开发</title>
</head>
<body>
    <div id="vue2x">
        <h1> 萨瓦迪卡 </h1>
        <todo-item></todo-item>
        <span>{{cd}}</span>
        <ol> <todo-item v-for="item in menu" :todo="item"></todo-item> </ol>
        <!-- 父组件向子组件传递消息，必须用 :name=name 的形式 -->
        <part-item :post='post'></part-item>
    </div>
    <script>
        var vm = new Vue({
            el: '#vue2x',
            data: {  // 这里和组件内参数 post 保持一致，语法要求必须定义，值可以不定义
                cd: '',
                post: undefined,
                menu: [
                    { id: 1, text: '炒菜' },
                    { id: 2, text: '馄饨' },
                    { id: 3, text: '餐厅的特色菜品' }
                ]
            },
            methods: {},
            components: {
                "todo-item": httpVueLoader('m1.vue'),
                "part-item": httpVueLoader('m2.vue')
            },
            mounted: function () {
                this.$on('eventName', e => { this.cd = e; });
            },
            beforeDestroy() { this.$off('eventName'); }
        });
    </script>
</body>
</html>

相同目录下的 m1.vue 文件，（接收 m2.vue 发来的消息）

<template>
    <li>{{ todo.text }}</li>
</template>

<script>
module.exports = {
    // 对象接收参数的方法 validator 和 required 在 vue 生产模式不起作用
    props: {
        todo:
        {
            type: Object,
            required: true,
            default: { id: 0, text: '请问您想吃点啥' }
        }
    },
    methods: {},
    mounted: function () {
        vm.$on('eventName', e => { console.log('组件1收到的消息:', e); });
    },
    beforeDestroy() {
        vm.$off('eventName'); // 确保在组件销毁前取消事件监听
    }
}
</script>

相同目录下的 m2.vue 文件，发送消息

<template>
    <div>
        <div>组件2参数 : {{ arg }}</div>
        <input type="text" v-model="arg">
        <div class="sr">{{ post }}</div>
        <button @click="sendmsg">发送消息</button>
    </div>
</template>
<script>
module.exports = {
    // 接收主程序单向传来的参数，可以用数组 [arg1, arg2] 接收，也可以用对象 {} 接收
    // props: ['todo'] 接收参数也可以，但是这种数组方法无法实现默认赋值效果
    props: { post: { tpye: String, default: '总线通信测试' } },
    data() { return { arg: '' } },
    methods: {
        sendmsg: function () { vm.$emit('eventName', this.arg); }
    }
}
</script>

<style scoped>
.sr {
    font-size: larger;
    color: red;
    background-color: bisque;
}
</style>