vue3子组件修改传值给父组件报警告warn:Component emitted event “update:dialogAddVisible”

最新推荐文章于 2025-05-07 09:51:34 发布
最新推荐文章于 2025-05-07 09:51:34 发布
阅读量1.4w 收藏 7
点赞数 13
CC 4.0 BY-SA版权
分类专栏： vue3 vue3报错合集 TypeScript 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Liberty_yes/article/details/124629332
本文探讨了Vue3中关于v-model父子组件传值时遇到的警告，并提供了在defineEmits中正确声明事件以消除警告的解决方案。

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

vue3报错之：使用v-model父子组件传值，子组件修改父组件里面的值的时候，报警告

warn:Component emitted event “update:dialogAddVisible” but it is neither declared in the emits option nor as an “onUpdate:dialogAddVisible” prop
父组件Father.vue：
在这里插入图片描述

子组件Child.vue：
在这里插入图片描述
报错：在这里插入图片描述
根据字面意思是说，

一个[Vue警告]:组件触发事件"update:dialogVisible"，但它既没有在发出选项中声明，也没有在"onUpdate:dialogVisible"中声明道具。

解决办法：我们在使用defineEmits声明的时候，给要传入的值前面加上update,这样就不会警告了！在这里插入图片描述

Vue 3 Component emitted event “confirmForm“ but it is neither declared in the emit
News777的博客
08-29 1万+
组件触发了事件"confirmForm"，但它没有在emit中声明。
vue 嵌套表格组件_支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component...
weixin_39518840的博客
12-19 1257
方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件，只需编写类似 async-validator 的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star(我...
Component emitted event “xxx“ but it is neither declared in the emits option nor as an “xxx“ prop.警告
热门推荐
weixin_52839472的博客
05-16 1万+
Component emitted event "xxx" but it is neither declared in the emits option nor as an "xxx" prop.警告
vue3子组件修改父组件数据
最新发布
前端小菜鸟也有人起的博客
05-07 548
vue3子组件修改父组件数据
vue3.0中子组件向父组件传递自定义事件时控制台报出警告
超人不会飞的web前端博客
06-11 875
event listeners (change) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
在Vue3中组件通信中（子传父）报出如下警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were p
wq_gf的博客
11-17 479
子传父
Component emitted event “click“ but it is neither...
weixin_72271537的博客
08-27 3864
Component emitted event "click" but it is neither declared in the emits option nor as an "onClick" prop.
Vue 官方笔记--组件
小菜的博客
07-24 3073
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
Vue 源码深入解析之 扩展、event、 v-model 和 slot
浮生离梦的博客
06-23 1155
一、扩展 前面分析了 Vue 的核心以及编译过程，除此之外，Vue 还提供了很多好用的 feature， 如 event、v-model、slot、keep-alive、transition 等等。对他们的理解有助于我们在平时开发中更好地应用这些 feature，即使出现 bug 我们也可以很从容地应对。 二、event 的理解 我们平时开发工作中，处理组件间的通讯，原生的交互，都离不开事件。对于一个组件元素，我们不仅仅可以绑定原生的 DOM 事件，还可以绑定自定义事件，非常灵活和方便。那么接下来我们
Vue.js 2.0单元测试实战指南：精通Jest和Mocha的高效技巧
![vue.js 2.0中文离线手册（CHM版）]...本文从Vue.js 2.0的单元测试概念入手，深入探讨了如何搭建测试环境、配置测试工具，并通过实战案例详细介绍了组件测试、应用级测试策略以及
sync分析之为啥el-dialog中的visible需要使用.sync
吴冬雪的博客
08-02 1万+
在使用element-ui 中的dialog组件时，发现visible属性在使用时需要添加.sync才生效。 我们先自己创建一个dialog组件，如下 当我们点击关闭按钮时，会发生警告 原因就是在VUE中，prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来。 虽然在demo中子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这么做，（如果您任性，觉得父组件拿到这个变量也没用，那您尽管在子组件中修改，但是小心父组件的入参变化时会覆盖你的修改） 现
vue3 报错合集
xiao_cheng_的博客
01-20 1万+
vue3报错合集 1、使用el-table时报错： Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor ‘Object’ | property ‘vnode’ -> object with constructor ‘Object’— property ‘component’ closes the circle 原本只
vue emit
u013284749的博客
10-21 408
这是vue中emit的方法源码部分,结合createComponentInstance中的代码，我们可以大概总结一下emit的执行过程，当确定对应的实例的emitsOptions中存在event对应的定义后，就会去查找props中传递的相关handle函数，存在则使用callWithAsyncErrorHandling调用对应的handle函数。的信息，也就是我们在子组件中 emit(action,data)传递的参数。内联函数 ，实际上对应的handle其实是($event) =>
Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题
会飞的猪0629
10-27 2358
Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题
封装Dialog子组件 解决 visible.sync问题
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
03-07 2239
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog> 等同于 <child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog> ** 2.在VUE中，prop的传递是父传给子，属于单向传输，而关闭事件在子组件里，一般情况下需要通
Component emitted event “toggleAll“ but it is neither declared in the emits option nor as an “onTogg
2301_79406053的博客
08-15 1027
错误原因:少加中括号,没有接收到事件 解决方法:加上中括号即可
Vue组件间传参（2）---父子
大香蕉的博客
08-10 1432
一、父子组件传值--.sync 众所周知，vue中是单向数据流，我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改，或者在父组件中进行修改，那么如何做到在子组件中直接修改父组件传递的数据呢？此时我们就需要用到修饰符.sync 父组件 <template> <div> // 子组件中需要传递的数据添加.sync修饰符 <siteDetail :dialogVisible.syn...
二次封装el-dialog组件，自定义组件应用v-model的实践
qq_41885295的博客
12-21 3778
我们在使用element-ui的时候，如果一个弹窗中的内容很多、复用率高，那么我们经常会把这个弹窗封装成一个组件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值