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

最新推荐文章于 2024-07-04 15:08:23 发布
最新推荐文章于 2024-07-04 15:08:23 发布
阅读量1.3w 收藏 7
点赞数 13
分类专栏： vue3 vue3报错合集 TypeScript 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liberty_yes/article/details/124629332
版权

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,这样就不会警告了！在这里插入图片描述

Liberty_yes
关注
  • 13
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 3 Component emitted event “confirmForm“ but it is neither declared in the emit
News777的博客
08-29 1万+
组件触发了事件"confirmForm"，但它没有在emit中声明。
Vue 官方笔记--组件
小菜的博客
07-24 2873
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
Component emitted event “click“ but it is neither...
weixin_72271537的博客
08-27 2687
Component emitted event "click" but it is neither declared in the emits option nor as an "onClick" prop.
vue3.0中子组件向父组件传递自定义事件时控制台报出警告
超人不会飞的web前端博客
06-11 770
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传值方式
最新发布
aaa123aaasqw的博客
07-04 1355
在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**
在Vue3中组件通信中（子传父）报出如下警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were p
wq_gf的博客
11-17 430
子传父
sync分析之为啥el-dialog中的visible需要使用.sync
吴冬雪的博客
08-02 1万+
在使用element-ui 中的dialog组件时，发现visible属性在使用时需要添加.sync才生效。 我们先自己创建一个dialog组件，如下 当我们点击关闭按钮时，会发生警告 原因就是在VUE中，prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来。 虽然在demo中子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这么做，（如果您任性，觉得父组件拿到这个变量也没用，那您尽管在子组件中修改，但是小心父组件的入参变化时会覆盖你的修改） 现
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 报错合集
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 282
这是vue中emit的方法源码部分,结合createComponentInstance中的代码，我们可以大概总结一下emit的执行过程，当确定对应的实例的emitsOptions中存在event对应的定义后，就会去查找props中传递的相关handle函数，存在则使用callWithAsyncErrorHandling调用对应的handle函数。的信息，也就是我们在子组件中 emit(action,data)传递的参数。内联函数 ，实际上对应的handle其实是($event) =>
vue源码分析-事件机制
yyzzabc123的博客
10-27 163
点击传递信息给父组件
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2739
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题
会飞的猪0629
10-27 2125
Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题
封装Dialog子组件 解决 visible.sync问题
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
03-07 2142
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog> 等同于 <child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog> ** 2.在VUE中，prop的传递是父传给子，属于单向传输，而关闭事件在子组件里，一般情况下需要通
Vue组件间传参（2）---父子
大香蕉的博客
08-10 1305
一、父子组件传值--.sync 众所周知，vue中是单向数据流，我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改，或者在父组件中进行修改，那么如何做到在子组件中直接修改父组件传递的数据呢？此时我们就需要用到修饰符.sync 父组件 <template> <div> // 子组件中需要传递的数据添加.sync修饰符 <siteDetail :dialogVisible.syn...
二次封装el-dialog组件，自定义组件应用v-model的实践
qq_41885295的博客
12-21 3419
我们在使用element-ui的时候，如果一个弹窗中的内容很多、复用率高，那么我们经常会把这个弹窗封装成一个组件
在el-dialog基础上，封装dialog可最大化，还原，拖动，调整大小
u011710926的博客
08-02 2927
最近，工作上需要，在el-dialog基础上封装了一个可最大化，还原，拖动，调整dialog大小的功能，本来妹子只想简单的用用别人分享出来的代码的，无奈有很多BUG，比如没做移动范围限制，导致能移动到可视窗口外导致无法关闭；调整大小时会出现宽度，高度超过可视区域而引起样式问题，以及滚动条会让可拖动区域失效等问题；然后跟我本来的最大化跟还原功能有部分冲突，导致dialog有很多其他问题。所以妹子只好自己写了（泪目），该代码还是参考了网上别人的代码，具体是参考的哪个不记得了（原谅妹子记性不好。。。），如果是用的
vue+element table弹窗组件
暴暴莉
11-27 5104
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、vue+element table弹窗组件 二、代码展示 1.表格数据展示 2.弹窗组件 总结 前言 本人爬虫菜鸟一枚，最近公司业务要求使用vue+flask搭建一个公司使用的后台管理系统，在此做个记录。也是本人第一次写博客，多多指点。 废话不多说...直捣黄龙，在表格数据展示经常需要有编辑和查看等操作，可以使用弹窗进行操作 提示：以下是本篇文章正文内容，下面案例可供参考 一、v..
vue组件的封装之dialog，新增修改共用弹窗，父子组件的调用
m0_59855881的博客
01-29 2069
子组件 <template> <div> <!-- 查询模块 --> <div class="select-content"> <span>姓名：</span> <h-input v-model="searchName" placeholder="请输入姓名" style="width: 300px" ></.
vue3 子组件传值给父组件
04-20
在Vue3中，子组件向父组件传递值可以通过自定义事件和props属性来实现。 1. 使用自定义事件： 子组件可以通过`$emit`方法触发一个自定义事件，并将需要传递的值作为参数传递给父组件。在父组件中，可以通过在子组件上监听该自定义事件来接收传递的值。 子组件代码示例： ```vue <template> <button @click="sendValue">传递值给父组件</button> </template> <script> export default { methods: { sendValue() { this.$emit('custom-event', '传递的值'); } } } </script> ``` 父组件代码示例： ```vue <template> <div> <child-component @custom-event="handleValue"></child-component> <p>接收到的值：{{ receivedValue }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedValue: '' } }, methods: { handleValue(value) { this.receivedValue = value; } } } </script> ``` 2. 使用props属性： 父组件可以通过props属性向子组件传递一个变量，子组件可以通过props接收该变量，并在需要时修改它。父组件可以监听子组件的变化来获取传递的值。 父组件代码示例： ```vue <template> <div> <child-component :value="receivedValue" @update-value="handleValue"></child-component> <p>接收到的值：{{ receivedValue }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedValue: '' } }, methods: { handleValue(value) { this.receivedValue = value; } } } </script> ``` 子组件代码示例： ```vue <template> <div> <button @click="updateValue">修改值并传递给父组件</button> </div> </template> <script> export default { props: ['value'], methods: { updateValue() { const newValue = '新的值'; this.$emit('update-value', newValue); } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值