如何实现Vue已经弃用的$dispatch和$broadcast方法？

最新推荐文章于 2023-09-21 22:28:33 发布
最新推荐文章于 2023-09-21 22:28:33 发布
阅读量499 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27449993/article/details/109306675
版权
对于父子（含跨级）传递数据的通信方式，Vue.js 并没有提供原生的 API 来支持，而是推荐使用大型数据状态管理工具 Vuex，但 Vuex 对于小型项目来说用起来真的很麻烦。并且在大型项目中如果仅仅只是极少的两个组件需要通行，用vuex也不友好虽然vue2.0弃用了这两个方法，在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 。那么 $dispatch 和 $broadcast 到底是怎么工作，其底层又是怎么实现的呢？接下来，我们就详细的说一说！01
摘要由CSDN通过智能技术生成

对于父子（含跨级）传递数据的通信方式，Vue.js 并没有提供原生的 API 来支持，而是推荐使用大型数据状态管理工具 Vuex，但 Vuex 对于小型项目来说用起来真的很麻烦。并且在大型项目中如果仅仅只是极少的两个组件需要通行，用vuex也不友好

虽然vue2.0弃用了这两个方法，在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 。

那么 $dispatch 和 $broadcast 到底是怎么工作，其底层又是怎么实现的呢？接下来，我们就详细的说一说！

01 $dispatch 详解

为了追根溯源，我们还是先去 Vue 1.0 的文档你观摩一下其概念吧！

概念：

Dispatch an event, first triggering it on the instance itself, and
then propagates upward along the parent chain. The propagation stops
when it triggers a parent event listener, unless that listener returns
true. Any additional arguments will be passed into the listener’s
callback function.

上面的一段英文定义来自 Vue 1.0 官方文档，其大致的意思是说：dispatch 是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时传播即会停止，除非该侦听器返回 true。 任何其他

最低0.47元/天 解锁文章
qq_27449993
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue: $dispatch 与 $broadcast 和 eventBus (全局方法)
Xu190131的博客
06-09 374
[src/main.js] 4.1 向上通知 $dispatch // 向上通知 Vue.prototype.$dispatch = function (eventName, value) { let parent = this.$parent while (parent) { parent.$emit(eventName, value) parent = parent.$parent } } 从下向上通知: 把孙子级组件里面的数据传送到爷爷级组件里面的方式 在子级组件里面
Vue $dispatch 和 $broadcast 详解
weixin_34411563的博客
03-06 2241
00 前言 $dispatch 和 $broadcast 作为一对情侣
vue $dispatch 和 $broadcast 详解
weixin_36430673的博客
03-16 1958
在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性，主要用来实现基于组件树结构的事件通信。 $dispatch解析 dispatch是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时，传播会停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。 dispatch接收两种参数：event 事件名称，[…args...
Vue中的$dispatch 和 $broadcast
vue
12-20 510
1、$dispatch Vue.prototype.$dispatch=function (eventName,componentName,value){ let parent=this.$parent; while(parent){ if(parent.$options.name===componentName){ parent.$emit(eventName,value); return } .
Vue中的情侣属性$dispatch和$broadcast详解
infotw的博客
06-10 3769
$dispatch 和 $broadcast 作为一对情侣
Vue组件之$dispatch和$broadcast
Sunday97的博客
06-11 2000
$ dispatch 主要是事件流由当前组件往父组件流动，当满足一定条件的时候就会触发当前子组件的监听事件，$broadcast 的功能是事件流由当前组件向子组件流动，当满足一定条件的时候就会触发当前子组件的监听事件。也就是说 $dispatch 和 $broadcast 主要解决了父子组件、嵌套父子组件的通信，但是没有解决兄弟组件的通信问题。所以后面被遗弃了。 如果要用这两个方法的话，就先在主j...
vue2.0弃用$dispatch和$broadcast
weixin_30772105的博客
09-19 361
$dispatch和$broadcast已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。 因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch和$broadcast也没有解决兄弟组件间的通信问题。 对于$dispatch和$b...
VUE的$dispatch 和 $broadcast 已经被弃用
热门推荐
qq_41861679的博客
06-12 1万+
$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。对于$dispatch 和 $broad...
Vue2组件通信 - dispatch 和 broadcast
最新发布
qq_40147756的博客
09-21 522
Vue2组件通信之dispatch 和 broadcast 的原理和举例。
vue2.0 中#$emit,$on的使用详解
08-30
Vue 2.0 中 $emit 和 $on 的使用详解 ...但是，这两个方法已经在 Vue 2.0 中被弃用，取而代之的是 $emit 和 $on。 $emit 和 $on 是 Vue 2.0 中非常重要的概念，它们使得组件之间的通信变得非常方便和灵活。
详解vue跨组件通信的几种方法
08-30
子组件可以使用 `$dispatch` 方法派发事件，父组件可以使用 `$broadcast` 方法广播事件。这种方式可以减少 props 的使用，但是需要额外定义几个事件，状态多了就会变得很复杂。 例如，在 App.vue 文件中，我们可以...
vite为vue3配置@路径，vite路径配置
青阳的博客
10-09 2960
vite为vue3配置@路径，vite路径配置
vue 静默修改url地址防止刷新页面的时候页面还是创建页面的状态
青阳的博客
12-04 2145
在创建一个活动的时候，在保存了即创建成功了之后，页面应该属于编辑的状态，不然用户手动刷新页面，页面依然处于创建状态， qs是一个库，将地址栏参数序列化 var query=that.$router.history.current.query query.isEdit=true query=JSON.parse(JSON.stringify(query)) var newUrl=qs.stringify(query) that.$mess.
new vue 主要干了啥？
青阳的博客
02-03 2136
Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。 初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm ，挂载的目标 就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程 Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法，则会把 el 或者 tem.
vue兼容ie9-11
青阳的博客
12-07 1815
vue项目兼容ie,采用core-js的方式，安装core-js：3.0以上版本 采用vue-cli脚手架，vue-cli3.0开始默认会安装core-js3.0的版本
ElementUI对话框（dialog）提取为子组件报错
青阳的博客
10-26 1522
这里涉及到弹窗el-dialog的一个属性show-close： show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误： vue.esm.js?efeb:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re...
vite 创建vue3的项目
青阳的博客
10-10 1288
npm init vite-app sail-vue3
vue3怎么使用$refs和$emit这些方法
05-27
在 Vue 3 中，使用 $refs 和 $emit 的方法与 Vue 2 中基本相同。 1. $refs 使用 $refs 可以访问组件或元素的属性和方法。在 Vue 3 中，你可以使用 `ref` 指令来声明一个引用，然后在组件中使用 `$refs` 来引用它。 例如，你可以这样声明一个 `div` 的引用： ``` <template> <div ref="myDiv"></div> </template> ``` 然后在组件中可以这样使用： ``` <script> export default { mounted() { this.$refs.myDiv.style.backgroundColor = 'red'; } } </script> ``` 2. $emit 使用 $emit 可以在组件之间传递事件和数据。在 Vue 3 中，你可以使用 `emits` 选项来声明一个组件可以发出的事件。 例如，你可以在组件中这样声明： ``` <script> export default { emits: ['my-event'], methods: { handleClick() { this.$emit('my-event', 'hello world'); } } } </script> ``` 然后在父组件中监听这个事件： ``` <template> <my-component @my-event="handleEvent"></my-component> </template> <script> export default { methods: { handleEvent(data) { console.log(data); // 'hello world' } } } </script> ``` 注意：在 Vue 3 中，如果你的组件使用了 `emits` 选项声明了可以发出的事件，那么在模板中使用这个组件时，你必须使用 `v-on:` 前缀来监听事件，而不能使用 `@`。例如： ``` <my-component v-on:my-event="handleEvent"></my-component> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值