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

yxp_xa

已于 2024-05-10 23:10:30 修改

阅读量828

点赞数 15

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-05-10 23:06:39 首次发布

本文链接：https://blog.csdn.net/yxp_xa/article/details/138685170

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