vue 广播（emit）

最新推荐文章于 2024-03-26 17:17:01 发布

trenTom

最新推荐文章于 2024-03-26 17:17:01 发布

阅读量1.1k

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/trenttom/article/details/103619652

版权

本文详细介绍了如何在Vue项目中实现组件间的通信。通过创建VueFunc.js文件并利用Vue的$emit和$on方法，实现了从发送方到接收方的消息传递。此方法适用于需要跨组件共享状态或触发事件的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建Vue 创建一个VueFunc.js文件

在这里插入图片描述
**

2.调用js

例： import VueFunc from “…/model/VueFunc”;

3.在发送方使用

VueFunc.$emit(‘news-msg’,this.msg); 发送消息

4.在接受方使用

VueFunc.$on(“news-msg”,function (data) {
console.log(data);
})接收

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

trenTom

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue——全局事件总线

求职大学生

06-01

297

它实际上使用了 Vue 的实例作为中央事件系统：任何组件都可以访问这个中央事件系统，以便在其他组件触发或响应某些事件。：事件总线可以视为一个全局的事件监听器：一个组件可以通过它来广播(emit)事件，其他组件则可以通过它来监听(on)这些事件。：在主要的 Vue 实例（通常在 main.js 或者 index.js 文件中）创建一个新的 Vue 实例来作为事件总线。：事件总线是一种非常灵活的通信方式，可以帮助你解决许多复杂的组件间通信问题。来发送事件，这个事件可以是任何你定义的事件。

广播与派发原理(基于vue实现dispatch, broadcast)

qq_34295211的博客

04-22

1133

广播与派发适用于有祖先关系的组件间通信，原理是通过遍历组件树,用组件名（或者其它组件唯一标识）定位到对应的组件，并在找到的组件实例中调用$emit，从而触发$on监听的事件，这样就完成了一次组件间的通信。广播是父组件遍历他下面的所有后代组件，而派发的顺序则相反，是子组件向上寻找对应的父组件。在vue中我们可以通过this.$parent获取父组件，this.$children获取...

参与评论您还未登录，请先登录后发表或查看评论

Vue2.0 事件的广播与接收(观察者模式)

08-27

主要介绍了Vue2.0 事件的广播与接收(观察者模式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue 广播（emit）

明耀的博客

06-02

1078

转载：vue 广播（emit） 1.创建Vue 创建一个VueFunc.js文件 ** 2.调用js 例： import VueFunc from “…/model/VueFunc”; ** 3.在发送方使用 VueFunc.$emit(‘n

12. vue2 利用广播实现非父子组件的传值

letianxf的博客

07-08

383

vue2 利用广播实现非父子组件的传值

vue2 $emit

最新发布

01-01

当用户点击按钮时，会执行 `boost` 函数，在该函数内部调用了 `bus.$emit('my_events', 'hello $emit/$on')` 来广播名为 `'my_events'` 的事件，并附带了一个字符串作为参数[^1]： ```html 传值 import ...

Vue的事件发射与监听

chengshuo_pretty的博客

04-16

1004

$emit()是发射 $on()是监听 <div id='app'> <h1 v-html="des"></h1> <h3>{{count}}</h3> </div> <button onclick='add()'> add </button> <button onclick='a...

vue滚动广播

Fairyasd的博客

09-02

707

vue中加入滚动广播功能。

vue广播与派发(组件间通信)

a598829181的博客

08-27

787

/** * @param {*} componentName * @param {*} eventName * @param {*} params * @param {*} once 通知到一个就不找了 */ export function broadcast(componentName, eventName, params, once = false) { for (let i = 0; i < this.$children.length; i++) { const c.

vue非父子界面传值（广播方式）需要使用的vueEvent.js

04-01

采用广播方式对非父子界进行传值，需要依赖的vueEvent.js

全局事件BroadCast

04-27

全局事件BroadCast的应用、发送广播消息

UniApp：Vue特性篇：vue2.0的广播与接收（待详细了解）

rxq134836的博客

04-02

1447

this.$eventHub Vue2.0 事件的广播与接收(观察者模式) Vue2.0中可以使用$emit ， $on， $off 分别来分发、监听、取消监听事件。官方的给出的最简单的升级建议是使用集中的事件处理器，而且也明确说明了一个空的vue实例就可以做到，因为Vue 实例实现了一个事件分发接口。在main.js中声明【eventHub】的Vue对象。 Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue(); A页面：在【

Vue公共广播/父子组件广播 $emit、$on的实现及原理解答

全端菜鸟小姐

12-04

8803

vm.$emit( event, […args] ) 参数： {string} event [...args] 触发当前实例上的事件。附加参数都会传给监听器回调 m.$on( event, callback ) 参数： {string | Array<string>} event (数组只在 2.2.0+ 中支持) ...

vue2.0 事件广播实例

软宝宝的博客

07-14

1596

vue2.0 广播实例 vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件,因为Vue 实例实现了一个事件分发接口,所以通过new vue（）第一步：全局设置在vue项目中找到全部APP.vue文件，加上以下代码 eventHub: new Vue() 第二部这样我们就可以在任何组件都可以调用事件发射接收的方法某一个组件内调用事件触发 //通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub

vue 脚架实现广播操作

陈小白

08-12

481

创建一个广播函数 /* 广播 */ /** * 子元素向父元素发送通告 * @param {Event} eventName 事件名字 * @param {Oeject|Array|String} data 参数 */ function $dispatch(eventName,data) { let parent = this.$parent; //循环查找父元素找到没有为止 while(parent){ //每找到一个父元素就派发一个事件 .

vue3 hooks之事件广播（支持跨标签页）

HuaiCheng9067的博客

03-26

714

【代码】vue3 hooks之事件广播（支持跨标签页）

VUE非父子组件传值通信,广播事件$emit,$on,消除事件监听$off

weixin_45882068的博客

07-20

1030

非父子组件传值通信方式一： 1.新建一个js文件，例如assects/VueEvent.js 然后引入vue： import Vue from 'vue'; 实例化vue： var VueEvent=new Vue(); //创建一个空的实例最后暴露这个实例： export default VueEvent; 2.在要广播的地方引入上面定义的实例 // 根据自己定义的路径引入实例 import VueEvent from '../assects/VueEv

VUE项目全局事件总线

pkbogdd123的博客

11-09

802

最近遇到个需求，就是要在vue项目中暴露一个方法供其他端调用给我们传输数据，然后用接收到的这个数据去改变我们的页面。这一下子就从主动更新页面变成被动更新页面了，话不多说上核心代码！ 1.创建一个event.js文件写入： //此处存放事件 let events = {}; //设置监听事件 export function on(name, self, callback) { let tuple = [self, callback]; events[name] = [tupl...