vue 中this.$on 为什么要放在created中

最新推荐文章于 2023-12-18 23:24:40 发布
最新推荐文章于 2023-12-18 23:24:40 发布
阅读量784 收藏
点赞数
分类专栏： vue 文章标签： vue.js vue
原文链接：https://www.cnblogs.com/wzcsqaws/p/11424950.html
版权

最近在思考一个问题为什么一定要在created中写this.$on，可以放在mounted中吗？

1. 如果触发和监听组件在页面上都创建了，那么可以放在mounted中

这种情况在实际工作中比较常见，如果在触发的组件实际触发之前，监听组件mouted方法执行了，那么就没有任何问题

2. 如果触发和监听组件在页面上依次创建，那么要放在created中

放在created中最主要的原因是组件的生命周期执行顺序决定的，a是现在的组件，b是即将显示的组件，那么执行顺序是b先created，beforeMount,然后才是a的beforeDestroy,destroyed钩子执行,b的mounted最后执行,针对这种业务你想一下，你在a的beforeDestroy钩子中触发emit，如果在b的mounted中监听，这时候b的生命周期还没有执行到那一步所以，你的触发是不会生效的，所以更通用的情况是放在created钩子中

转自: vue 中this.$on 为什么要放在created中.

llcight
关注
专栏目录
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2608
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
vue中$emit和$on的使用
qq_40431896的博客
11-12 3846
1. vm.$on(event,callback) 用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外函数。 个人理解：监听接收传来的值 vm.$on('test',function(msg){ console.log(msg) }) 示例： 2. vm.$emit(eventName,[…args]) 用法：触发当前实例上的事件。附加参数都会传给监听器回调。 个人理解： 注册一个自定义事件 // 只配合一个事件名使用emit // 子组件 V
vue this.$on
m0_68717067的博客
09-06 879
this.$on可以监听一个自定义事件，当事件被触发时执行相应的处理函数。
vue-生命周期，created和mounted的区别
wwwkm123的博客
12-15 636
本文章来源于：https://segmentfault.com/a/1190000008570622 什么是生命周期： Vue实例有一个完整的生命周期，也是从开始创建，初始化数据，编译模板，挂载 Dom，渲染-》更新-》卸载等一系列的过程，我们称这是vue的生命周期。 Vue实例创建到销毁的过程是生命周期。 在Vue的生命周期中，他提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局 在这些事件相应方法中的this指向的是整个vue实例。 .
vue在created调用点击方法_created最新:在vue中created、mounted等方法使用小结_爱安网 LoveAn.com...
weixin_42504327的博客
02-22 291
关于"created"的最新内容 聚合阅读这篇文章主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...这篇文章主要介绍了解决父组件将子组件作为弹窗调用只执行一次created的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...这篇文章主要介绍了谈一谈vue请求数据放在created好还是mou...
Vue this.$emit和this.$on
小葵坤_易安的博客
08-06 1万+
1、解决第一次监听不到数据的方法 this.$nextTick() this.$nextTick(function () { this.$bus.$emit("yulan", row); }) setTimeout setTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100); 2、子组件传值给父组件 子组件中使用$emit触发事件的值传出去，父组件通过事件监听，获
【vue3】四、onMounted、onCreated等使用
热门推荐
qq_39323073的博客
10-21 6万+
创建文件useMouse.js 从vue模块引入onMounted，ref 在onMounted中定义方法 import {onMounted, ref} from 'vue' export default function useMouse() { let x = ref(0) let y = ref(0) onMounted(() => { window.addEventListener('mousemove', e => { x.value = e.pageX .
vue中 this.$eventHub.$emit 的用法
09-06
在 Vue 中，`this.$eventHub.$emit` 是一种通过事件总线进行跨组件通信的方式。通常情况下，我们可以通过创建一个事件总线实例，并将其挂载到 Vue 实例的原型上，以便在整个应用程序中访问。下面是一种常见的用法...
Vue 兄弟组件（子组件与子组件间通信）间通信，$on方法失效问题，以及父子组件间通信
laianko的博客
03-30 1410
Vue组件间通信，兄弟组件间，父子组件间
vue使用this.$bus+keep-alive解决组件间跳转传参，参数无法保存问题
qq_35192247的博客
11-12 1700
vue使用this.$bus+keep-alive解决组件间跳转传参，参数无法保存问题 前言 这是我在最近工作中经常遇到的问题，整理一下分享一波，希望大家也少踩坑。 问题描述 组件a使用this.$router.push({name: '组件b',params: '参数1'})传递参数并跳转到组件b后，组件b用this.$route.param获取到参数1，组件b跳转到组件c，并携带参数2再跳转回...
vue3从零开始（二）
SanOrintea的博客
03-03 1118
今天学vue3中的setup 它是vue项目文件的一个函数，写的地方和data，oncreate，methods等同级。 好处：业务逻辑代码集中 也就是这样： 一、在哪使用 <script> export default { components: { }, data() { return{ } }, setup(){ return { } } } </script> 同时还有单文件组件语法糖<script
Vue探索
黑胡子大叔的博客
03-18 418
Vue 生命周期 Setup() @date 2021/3/18 @note 今天再看一个开源的系统项目 https://gitee.com/asaasa/element_vue3.0?_from=gitee_search#/asaasa/element_vue3.0/blob/dev/src%5Cplugins%5Cpermission.js 在看到它的登录部分时候，发现该页面不存在onCreate()等生命周期的处理，只是在一个Setup()中有处理，搜罗了一下相关的资料，汇总一下 抛出问题 既然
Vue $on的用法
wnk1997的博客
02-10 8526
转载：https://www.cnblogs.com/jin-zhe/p/13100194.html ue中使用 $emit(eventName) 触发事件，使用 $on(eventName) 监听事件 $emit(eventName) 触发当前实例上的事件，附加参数都会传给监听器回调。 on(eventName)监听当前实例上的自定义事件。事件可以由vm.on(eventName) 监听当前实例上的自定义事件。事件可以由 vm.on(eventName)监听当前实例上的自定义事件。事件可以由vm.emi
VUE中 $on, $emit, v-on三者关系
以爱护甲,爱满枫林。
03-09 863
VUE中 $on, $emit, v-on三者关系 每个vue实例都实现了事件借口 使用$on(eventName)监听事件 使用$emit(eventName)触发事件 若把vue看成家庭(相当于一个单独的components)，女主人一直在家里派($emit)男人做事，而男人一直监听$on着女主人的指派($emit)里eventName所触发的事件消息，一旦$emit事件一触发，$on则...
vue3的生命周期
最新发布
kk_1_2_3的博客
12-18 93
非setup中大部分同vue2，变的有beforeDestroy/beforeUnmount，destroyed/unmounted。在setup中 beforeCreate 和 created相当于合并进入setup中执行，而里面的函数变为on开头。
Vue中$emit和$on的用法
科技向善
02-15 1万+
代码示例： <div id='app'> <button @click='boost' > 触发事件</button> </div> new Vue({ el: '#app', data() { return { message: 'hello vue' } }, created() { this.$on('my_even...
Vue.js 进阶技巧Day02 $on 与 $emit （局部通信、父组件通知所有子组件、全局监听和通讯）
坚持硬核
10-20 983
目录 0x00 局部通信： 0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢? 0x03 全局的监听和通讯： 0x00 局部通信： 只能在当前组件下使用 <template> <div class='container p-5'> <button class='btn btn-success' @click='test'> 点击通讯 </button> <demo-item></dem
vue $on 和 $emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果
weixin_41796631的博客
10-30 1万+
$on 和 $emit 一起使用 $on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 $emit：触发当前实例上的事件。附加参数都会传给监听器回调。 例子解析： 1. $on 监听自定义事件要在事件执行前被监听。所以例子中在生命周期 beforeCreate 就开始了监听自定义事件 "start"。 2. 在method...
vue：事件总线的$on写在哪里？
m0_64401231的博客
10-01 814
vue：事件总线的$on写在哪里？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值