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

个人感觉，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>