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