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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/9822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探秘艺术之源:DALL-E3与Midjourney 绘画软件深度对照分析

随着人工智能技术的飞速发展&#xff0c;AI绘画软件已经成为了艺术创作的一大助力。在这场融合了技术与艺术的革新浪潮中&#xff0c;DALL-E3和Midjourney无疑是最受瞩目的两位选手。它们不仅改变了艺术家的创作方式&#xff0c;还为平凡人打开了一扇通往艺术殿堂的大门。本文将…

使用Matplotlib绘制正弦和余弦函数曲线

前言 在数据可视化领域&#xff0c;Matplotlib是一个功能强大的Python库&#xff0c;它允许用户创建各种静态、交互式和动画图形。本文将引导您通过一个简单的示例&#xff0c;学习如何使用Matplotlib绘制正弦和余弦函数曲线。 第一步&#xff1a;导入必要的库&#xff1a; …

【漫画版】指挥官的排序战术:快速排序算法解密

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任字节跳动数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python&#xff0c;欢迎探讨交流 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题…

基于自我对弈框架的偏好优化算法SPPO

传统的从人类反馈中进行强化学习&#xff08;RLHF&#xff09;的方法仰赖如Bradley-Terry模型等参数模型,但这样的模型难以充分捕捉人类偏好中的非递移性和非理性。最新的研究进展显示,直接使用偏好机率可以更准确地反映人类偏好,从而实现更灵活、更精确的语言模型对齐。本文提…

教你解决PUBG绝地求生登不进去 无法进入游戏 启动很慢的问题

尽管《绝地求生》&#xff08;PUBG&#xff09;以它那扣人心弦的战术竞技和逼真模拟的战场氛围风靡全球&#xff0c;揽获无数玩家的喜爱&#xff0c;但一些玩家在经历了一场血脉喷张的生存较量后&#xff0c;却不得不面对一个不那么愉悦的后续&#xff1a;游戏在结算阶段后出现…

从某CIM厂12寸项目中止导入谈起

最近在网上开始传播&#xff0c; 两12吋新建Fab中止某CIM导入&#xff0c;CIM国产化路往何方&#xff1f; 从文中我已经知道了这家公司是谁了&#xff0c;看到这个情况&#xff0c;还是感触良多。内部居然还有股权进行内部交易得情况&#xff0c;可见当时多少去博一把了&…

02.02.返回倒数第k个节点

实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 注意&#xff1a;本题相对原题稍作改动 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4 说明&#xff1a; 给定的 k 保证是有效的。 代码&#xff…

2批!2024年武汉市科技企业孵化器、众创空间申报时间、流程

2024年武汉市科技企业孵化器、众创空间申报时间、流程等内容如下&#xff0c;武汉市各区县的企业单位可以了解一下 申报时间 2024-04-22 至 2024-09-14 支持方式 武汉市2024年度科技企业孵化器认定和众创空间备案申报 申报条件 1、市级认定&#xff08;备案&#xff09;&a…

跨平台应用开发神器Uniapp

Uniapp是一款基于Vue.js框架的跨平台应用开发框架。它可以将同一份代码编译生成多个应用程序&#xff0c;包括iOS、Android、H5、小程序等。在这篇文章中&#xff0c;我们将详细介绍Uniapp的特点、优势以及如何使用Uniapp开发跨平台应用。 一、Uniapp的特点 1、跨平台开发 U…

YOLOv5改进 | 注意力机制 | 理解全局和局部信息的SE注意力机制

在深度学习目标检测领域&#xff0c;YOLOv5成为了备受关注的模型之一。本文给大家带来的是能够理解全局和局部信息的SE注意力机制。文章在介绍主要的原理后&#xff0c;将手把手教学如何进行模块的代码添加和修改&#xff0c;并将修改后的完整代码放在文章的最后&#xff0c;方…

C语言/数据结构——每日一题(分割链表)

一.前言 今天在LeetCode觉得很不错&#xff0c;想和大家们一起分享这道链表题——分割链表&#xff1a;https://leetcode.cn/problems/partition-list-lcci废话不多说&#xff0c;让我们直接进入正题吧。 二.正文 1.1题目描述 1.2题目分析 大致思路&#xff1a;我们可以通过…

从头开始的建材类电商小程序开发指南

在当今数字化时代&#xff0c;小程序已经成为了许多企业推广和销售的重要渠道。对于建筑材料行业来说&#xff0c;开发一个属于自己的小程序商城不仅可以提升产品曝光度&#xff0c;还可以提供更好的用户购物体验。下面&#xff0c;我们将逐步教你如何开发建筑材料行业小程序。…

未来趋势系列 篇一:AI主题全景分析和股票梳理

文章目录 系列文章全景分析算力算力租赁液冷英伟达AI服务器AI芯片光模块AIPC云计算AIGC大模型KIMI、SORA、秘塔AI股票梳理系列文章 未来趋势系列 篇一:AI主题全景分析和股票梳理<

typescript 中的接口及其用途

接口&#xff1a;定义行为动作的规范 属性接口、函数类型接口、可索引接口、类类型接口、 1、属性接口 对JSON的约束 function printLabel(label: string): void {console.log(printLabel); } printLabel(字符串)function printLabel2(labelInfo: { label: string }): void {…

文章分享:《肿瘤DNA甲基化标志物检测及临床应用专家共识(2024版)》

本文摘自于《肿瘤DNA甲基化标志物检测及临床应用专家共识&#xff08;2024版&#xff09;》 目录 1. DNA甲基化标志物概述 2 DNA甲基化标志物的临床检测 2.1 临床样本前处理注意事项 2.2 DNA甲基化标志物检测技术方法 2.2.1 DNA提取与纯化 2.2.2 DNA转化 2.2.3 DNA 甲基…

Oracle 19C 传输表空间之-Windows 至 Linux

1、源端步骤&#xff08;Windows &#xff09;&#xff1a; SQL> col platform_name for a40 SQL> SELECT * FROM V$TRANSPORTABLE_PLATFORM ORDER BY PLATFORM_ID; PLATFORM_ID PLATFORM_NAME ENDIAN_FORMAT CON_ID ----------- -…

翻工第二次 Ant Design Pro 下载,发现问题,电脑网络配置有误,魔法了

一、相关网址链接 鱼皮的用户中心项目 &#xff08;前端Ant Design Pro构建&#xff09; 语雀 ## 没有选择umi版本这一步 Issue #11144 ant-design/ant-design-pro GitHub 关于umi ui图标未显示问题_umi ui不出现-CSDN博客 二、存在问题 导致下载速度慢 本人镜像代码写…

关于emulate

enumerate() 函数用于将一个可遍历的数据对象(如列表、元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中。 enumerate() 函数的主要优势在于简化代码和提高可读性。它解决了在遍历可迭代对象时需要手动跟踪索引的问题。这在需要同时访问元素…

AI实景模型无人自动直播助手.减少商家在短视频线上卖货的成本,开启无人直播新时代!

在互联网时代&#xff0c;直播已经成为信息传播的主流方式&#xff0c;尤其是在年轻人中&#xff0c;直播更是备受追捧。然而&#xff0c;对于许多想要尝试直播的人来说&#xff0c;缺乏合适的主播可能成为一大障碍。那么&#xff0c;面对这一难题&#xff0c;如何实现手机无人…

C++ 常量

常量是指在程序运行过程中&#xff0c;其值不能被改变的量。 如&#xff1a;i255;arearr3.14; 在程序中直接使用数值有两个问题&#xff1a; 可读性差&#xff1b; 可维护差&#xff1b; 一 符号常量 C语言符号常量的顶用形式如下&#xff1a; 二 C99的const常量 C 语言co…