this.$emit()触发自定义事件没有反应，触发自定义事件失效

最新推荐文章于 2024-03-28 14:20:54 发布
最新推荐文章于 2024-03-28 14:20:54 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： 前端报错 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55949207/article/details/126156116
版权

1.查看事件名称，把驼峰命名法改成：login-to 这种形式

2.如果是子组件触发父组件绑定的事件，一定要用 this.$parent.$emit() 触发

//子组件
this.$parent.$emit('btn-login', data)

在这里卡了一早上，忘记有这个$parent了。

only you502
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue $emit()不能触发父组件方法的原因及解决
12-28
$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) 补充知识：Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件（发外部事件）不起作用 今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问题，代码如下： <button v-on:click=IncrHandle>增加</bu
this.$emit方法无效的原因
热门推荐
weixin_44294658的博客
08-04 2万+
this.$emit无效的问题 开发过程汇总突然遇到this.$emit无法将事件发布出去，原因查找发现是使用了驼峰命名法，导致方法不能被监听到。点击查看vue官方文档说明，最神奇的是并不是左右的emit都失效，只是有些emit的方法名在特定情况下失效。 解决方案 使用-连接，比如： this.$emit(‘my-method’); 使用this.$parent.方法名调用 ...
vue3 emit中update无效
最新发布
生有涯学无涯
03-28 480
在vue3版本3.4以下，无法使用直接双向绑定。而要使用如下方式：一个名为 modelValue 的 prop，本地 ref 的值与其同步；一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。
uni-app 中$on 监听不到$emit事件的问题
weixin_43416930的博客
09-27 2074
特别是在遇到以下这种情况的时候页面A 跳转页面B， 页面A中 $emit()事件，页面B＄on监听事件，这时候就会发现明明事件发射了，但是页面B就是监听不到。，但是上面的业务场景明显办不到，所以可以使用 localStorage 或者uniapp中 getApp() 等的方式将要传递的东东暂存，就可以实现以上场景。，打个比喻，类似于汽车撞墙了你知道拐了，股票涨了你知道买了，犯错误判刑了你知道悔改了，鼻涕都流到嘴里了你才知道要甩了。心似双丝网，中有千千结。
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
Vue $emit()不触发方法的原因
weixin_44880056的博客
07-14 3925
Vue $emit()不触发方法的原因 1.事件名称不全是小写。事件名称要求全小写。 2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。 3.父组件没有用 .sync修饰符 .sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。 vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。 ...
处理vue3 组合式API setup emit(‘update:modelValue‘) 无效的问题
或许丶Blog
04-19 1万+
// 子组件 export default defineComponent({ props: { collapsed: { type: Boolean, }, }, components: { MenuFoldOutlined, MenuUnfoldOutlined }, setup(props, { emit }) { const store = useStore(); // 必须用computed包装一层而且需设置get和set .
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue中this.$emit()的返回值是什么
10-17
主要介绍了详解vue中this.$emit()的返回值是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
对vue.js中this.$emit的深入理解
10-18
下面小编就为大家分享一篇对vue.js中this.$emit的深入理解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
$emit()不触发方法
jokren的博客
07-27 5496
一，父组件不触发原因： $emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名。 二，解决办法 1.改小写命名 2.用this.$parent.Event (Event为父组件中的自定义方法)使用父组件实例触发方法。 3.如果是点击触发的 直接$emit(‘click’)触发 ...
vue 弹框使用this.$emit调用父组件方法及传参 无效 (已解决)
蓝胖子的博客
10-18 6016
子组件中调用父组件方法及传参 this.$emit无效的问题 最神奇的是并不是所有的emit都失效，只是有些emit的方法名在特定情况下失效。 在项目中刚开始用的是 this.$emit(“方法名”,‘参数’) this.$emit("fathermethod", this.labelTableData); this.$emit 无效. 解决方法: 使用this.$parent.方法名(“参数”)调用 // 关闭弹窗 close() { this.detailVisible
sync不生效 vue_Vue .sync修饰符与$emit(update:xxx)写法问题
weixin_36039533的博客
02-04 2012
问题描述最近在学习Vue，在学习自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下使用.sync修饰符,即// this.$emit('update:father-num',100); //无效this.$emit('update:fatherNum',100); //有效//......&l...
Vue 父子组件方法this.$emit()有时候不触发问题
qq_41580802的博客
10-26 7534
Vue 父子组件方法this.$emit()有时候不触发问题，亲测有效
vue.js中this.$emit和this.$parent失效
a983677218的博客
08-29 525
然后就是在子组件中调用父类方法时，如果父类会对传到子类的参数进行修改时候，控制台会报错。建议如果需要修改，则在子组件中定义data对应传进来的参数，并通过watch监听传进来的参数改变data值，这样就不会报错。/> 这样在子组件中才能使用this.$emit（‘sun’,param）,这里sun就是父类的parent方法。在开发过程中偶然遇到在子组件中用this.$emit和this.$parent调用父组件都失效。使用Vue进行组件化开发，少不了组件间的方法调用，和方法传递。
vue 双向绑定问题$emit无效
luoteen的博客
11-09 3521
父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变 父组件： <div> // 子组件 <son :status.sync="status"/> </div> <script> export default { data(){ return{ status:false } } } </script> 子组件： <div @click="change"&gt
Vue .sync修饰符与$emit(update:xxx)写法问题
xqhys的博客
10-16 2667
在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下 由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下： 使用.sync修饰符,即 // this.$emit('update:father-num',100); //无效 this.$emit('update:fatherNum',100); //有效 //...... <father v-bind:father-num.sync="test"&g.
this.$on和this.$emit失效
08-20
当在Vue组件中使用`this.$on`和`this.$emit`时，有几种可能导致它们失效的原因。 首先，可能是因为没有正确设置事件监听和触发。要确保在监听事件时使用了正确的事件名称，并在触发事件时使用了相同的事件名称。此外，还要确保在正确的组件上调用`this.$emit`方法，以便触发事件。 另一个可能的原因是在组件之间的嵌套层级中出现了问题。如果组件嵌套层级太深，事件可能无法正确地传递到父组件。这可能是导致`this.$on`和`this.$emit`失效的原因之一。 此外，如果使用了递归组件或多级嵌套组件，并且在子组件中使用`this.$emit`触发事件，但父组件无法监听到这些事件，则可能是因为没有正确设置事件监听。在递归组件中，确保在子组件中正确地使用了`$listeners`属性。 另外，还要确保在使用`this.$on`时，组件实例化后才能正确监听事件。如果在组件实例化之前执行`this.$on`，则无法正确监听事件并触发相应的回调函数。 最后，如果在组件中使用了非父子组件之间的通信方式（例如使用Vue的事件总线或全局事件），那么`this.$on`和`this.$emit`也可能失效。在这种情况下，需要确保正确设置事件监听和触发，并且在适当的组件上调用`this.$emit`。[3] 总结起来，`this.$on`和`this.$emit`在使用时需要注意正确设置事件监听和触发，并确保正确的组件嵌套层级以及适当的事件传递方式，以避免它们失效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决vue bus.$emit触发第一次$on监听不到问题](https://download.csdn.net/download/weixin_38643407/12924658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue子组件递归导致this.$emit失效，父组件监听不到](https://blog.csdn.net/qq_53121751/article/details/127549279)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值