vue $emit不能触发父组件的原因

最新推荐文章于 2023-08-29 09:49:10 发布
最新推荐文章于 2023-08-29 09:49:10 发布
阅读量913 收藏
点赞数
原文链接：https://blog.csdn.net/weixin_41472431/article/details/89434160
版权

vue 不能触发$emit的原因

在使用 e m i t 时 只 能 小 写 不 能 使 用 驼 峰 命 名 规 则 。 如 果 改 为 小 写 还 是 不 行 ， 可 以 试 试 t h i s . emit时只能小写不能使用驼峰命名规则。如果改为小写还是不行，可以试试 this. emit时只能小写不能使用驼峰命名规则。如果改为小写还是不行，可以试试this.parent.Event (Event为父组件中的自定义方法)
参考：https://blog.csdn.net/weixin_41472431/article/details/89434160

煅鈊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
$emit和$on可以实现组件之间的传值，我们知道父组件传值给子组件使用props，但是不允许子组件传值给父组件，这时候使用这个就可以实现了。 注意：$emit和$on的事件必须在一个公共的实例上，才能够触发。 例子：我要实现某个系统的通讯录功能，在web端我们可以使用基于jQuery的ztree插件实现目录的展现，但是在vuejs框架里面，tree目录需要通过递归组件实现。 1、现在有两个组件，父组件contact_index.vue，子组件cust_tree.vue 2、点击父组件里面的选择银行，跳出银行树目录结构（使用vuejs的递归组件实现）,这里面需要做两种传值： （1）父组件
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue $emit $refs子父组件间方法的调用实例
11-30
1、$emit 子组件调用父组件的方法并传递数据 注意：子组件标签中的时间也不区分大小写要用“-”隔开 子组件： <template> <button @click="emitEvent">点击我</button> </template> [removed] export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent(){ this.$emit('my-event', this.msg) //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定
Vue $emit()不能触发父组件方法的原因及解决
12-28
$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) 补充知识：Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件（发外部事件）不起作用 今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问题，代码如下： <button v-on:click=IncrHandle>增加</bu
Vue $emit()不触发方法的原因
weixin_44880056的博客
07-14 3898
Vue $emit()不触发方法的原因 1.事件名称不全是小写。事件名称要求全小写。 2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。 3.父组件没有用 .sync修饰符 .sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。 vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。 ...
Vue 父子组件方法this.$emit()有时候不触发问题
qq_41580802的博客
10-26 7370
Vue 父子组件方法this.$emit()有时候不触发问题，亲测有效
$emit()不触发父组件方法
weixin_41700532的博客
02-24 2500
问题原因及解决： 1、$emit的事件用了驼峰命名，有的浏览器会自动转化为小写，所以就匹配不到； 解决：都改为小写或者是用’-'隔开，比如: this.$emit('callbackFn'); @callback-fn="xxx" 2、this.$emit触发的是子节点，监听的节点是父节点 解决：将触发事件放在父节点触发 this.$parent.$emit('xxxx'); ...
Vue $emit()不能触发父组件方法的原因
小米粒的博客
04-21 9615
$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) ...
vue3.0中子组件向父组件传值emit的使用注意事项
yang_web的博客
05-20 3735
子组件的写法， 需要从setup函数中引出{emit} <template> <div id="center" v-if="isShow"> <h2><slot>my model</slot></h2> <el-button type="primary" @click="btnclose">传递事件</el-button> <el-button type="primary" .
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
热门推荐
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
vue3 setup 中的 emit事件触发
green_dream123的博客
10-20 9643
** vue3 setup 中的 emit事件触发 ** 父组件 <template> <PaymentDlg ref="paymentDlg" @onSaveOk="paymentTest" /> </template> <script setup> import PaymentDlg from './dashboards/payment-dlg.vue' import { ref } from "vue"; const paymentDlg = ref(
vue.js中this.$emit和this.$parent失效
最新发布
a983677218的博客
08-29 497
然后就是在子组件中调用父类方法时，如果父类会对传到子类的参数进行修改时候，控制台会报错。建议如果需要修改，则在子组件中定义data对应传进来的参数，并通过watch监听传进来的参数改变data值，这样就不会报错。/> 这样在子组件中才能使用this.$emit（‘sun’,param）,这里sun就是父类的parent方法。在开发过程中偶然遇到在子组件中用this.$emit和this.$parent调用父组件都失效。使用Vue进行组件化开发，少不了组件间的方法调用，和方法传递。
【超细节】Vue3组件事件怎么声明，defineEmits与emit
有事儿私信。
08-04 4248
组件事件是 Vue 组件之间进行通信的一种方式。它允许一个组件触发一个自定义事件，并且其他组件可以监听并响应这个事件。
$emit()不触发父组件方法 Vue
alintever的博客
09-16 2302
同样的错误犯了两遍特此记录 方法没有写在Vue methods: {} 内 <template> <BankList @foo="bar"></BankList> </template> <script> methods: { // 写在methods内部才能接收到,有时候写到外面半天没找到原因也没报错,这么个错误找个一个小时 bar() { } } </script> $emit() 触发的是子节点,.
vue子组件调用父组件方法$emit没有生效
qq_35567179的博客
09-12 6655
一开始查百度，别人都说 this.$emit(方法名, 参数);里面的方法名不能是驼峰法，试了下不行； 还有说emit不能写在axios里的，于是我拿到外面去了也不行； 最后谷歌查，原来是父组件里的子组件需要注册一下被监听的方法 parent组件 <el-parent> <wx-upload v-on:uploadsuccess="UploadSuccess"></wx-upload> </el-parent> ... <sc
vue $emit不起用 ，父组件监听不到？？
一撇一画的博客
09-09 1669
<template> <div class="flex flex-wrap w-100 bg-white " > <div v-for="(item,index) in list" :key="index" class="p-1" > <span @click="checkChildren(item)" class="iconfont"> {{item.menuName}}{{i
Vue使用emit传参，父组件接收不到数据问题解决方案
qq_54896194的博客
07-23 1400
一开始我是写着是没问题的，后面需要从子组件传参的数目增加了以后，发现代码基本没变，但是父组件却收不到参数了。
vue子组件调用父组件方法$emit调用不到的问题
爱心觉罗
08-18 800
【代码】vue子组件调用父组件方法$emit调用不到的问题。
vue $emit()不能触发父组件方法的原因及解决
05-01
在使用Vue的$emit() 方法时，有时候会发现不能触发父组件方法。 这通常是由于传递给$emit()方法的事件名称与父组件中方法名称不一致所导致的。在父组件中需要监听的事件名称和$emit()方法中传递的事件名称必须一致，才能正确地触发父组件的方法。 此外，还需要确保父组件中已经正确地定义了需要监听的事件名称，即使用v-on指令监听事件。这通常是通过在父组件中使用“@事件名称”或“v-on:事件名称”来实现的。 如果仍然无法触发父组件方法，可以在父组件中使用Vue的$on方法手动绑定事件并监听。例如，在父组件中，可以使用以下方式来监听事件： mounted() { this.$on('child-event', () => { this.parentMethod(); }); } 这样，在子组件中使用$emit('child-event')方法就能够正确地触发父组件中定义的parentMethod()方法了。 总之，不能触发父组件方法的原因通常是事件名称不一致或未正确定义事件监听。解决方法包括确保事件名称一致并正确定义事件监听，或者使用$on手动绑定事件监听。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值