vue3.0子组件emit传值给父组件报警告

最新推荐文章于 2024-07-12 21:26:02 发布
最新推荐文章于 2024-07-12 21:26:02 发布
阅读量3.4k 收藏
点赞数 2
分类专栏： vue 文章标签： vscode vue ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_girl_wan/article/details/119607377
版权
在Vue3.0中遇到子组件通过emit传递值给父组件时，出现了一个关于非emit事件监听器的警告。警告提示组件渲染了碎片或文本根节点，无法自动继承非emit事件。解决方法是确保监听器仅作为组件的自定义事件声明，使用'emits'选项来指定。
摘要由CSDN通过智能技术生成

记录下vue3.0中子组件使用emit传值给父组件，报以下警告

runtime-core.esm-bundler.js?5c40:6871 [Vue warn]: Extraneous non-emits event listeners (getSon) 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.

解决办法如下图：

 

 

 

Lucky_girl_wan
关注
专栏目录
Vue3.0的父子传值
qq_44316317的博客
01-13 1197
Vue3.0的父子传值 1.父组件向子组件传值 父组件： <template> <div> <h1>父组件<h1> <hr> <son :money="money"> </div> </template> <script> import {ref} from 'vue' import son from './son.vue' export default { name:'A
VUE3.0组件兄弟之间传值
moonas520的博客
04-28 921
用vue3基础语法操作 引入vue <script src="https://unpkg.com/vue@next"></script> 页面渲染代码 <div id="app"></div> 根组件 <template id="root"> <div> form-table与list-table都是子组件的名字，把子组件放在根组件中渲染显示 <form-tab...
vue3 使用 defineEmits 报错:emit is not a function
lengxiaoying的博客
09-11 4140
解决办法，改为setup script代码块即可。emit打印出来为null。
vue3如何使用emit实现值子组件传父组件
m0_46390103的博客
09-22 574
Vue3父子组件emit参数传递
在Vue中，子组件向父组件传递数据
最新发布
m0_73940426的博客
07-12 3131
❤️❤️❤️本人菜鸟修行期，如有错误，欢迎各位大佬评论批评指正！😄😄😄👍 👍 👍。
vue3警告[Vue warn]: Extraneous non-emits event listeners (getVal) were passed to component but could n
weixin_46409887的博客
09-02 5123
[Vue warn]: Extraneous non-emits event listeners (getVal) were passed to component but could not be automatically inherited because component renders fragment or text root nodes
Vue3警告：[Vue warn] Extraneous non-emits event listeners (changeParentProps) were passed to component
m0_67402026的博客
03-02 2696
在Vue3中组件通信中（子传父）报出如下警告： [Vue warn]: Extraneous non-emits event listeners (changeParentProps) 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 compon
请求正常执行但是js语法报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
六耳石猴的博客
04-24 2万+
开发过程中发现前端请求正常执行，接口功能正常且正常返回数据，但是js仍然报语法错误Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘) 原因：自定义拦截器后导出方法时忘记把promise对象return出去 如下： 正确处理方式应该将promise对象requestreturn出去，调用方法的位置才会是异步执行，就不会提示语法错误了 ...
vue父组件向子组件动态传值的两种方法
08-28
Vue 父组件向子组件动态传值的两种方法 在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props ...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在子组件中定义`props`，声明需要接收的属性。例如，子组件`fromTest.vue`如下： ```html <h2>{{title}} ...
vue3.0 子组件调用父组件中的方法
fwdwqdwq的博客
03-09 9745
在vue2中，子组件调用父组件，直接使用this.$emit()即可。 但是在vue3中，很显然使用this.$emit() 已经开始报错了，为什么会报错呢？ 原因是：在vue3中setup是在声明周期beforeCreate和created前执行，此时vue对象还未创建，因此我们无法使用this。 那么我们在vue3中，子组件该如何调用父组件的函数呢？ 方法一： 首先写一个 Child.vue，重点在 setup 函数中引入 context 形参，配合 emit 使用。定义了两个函数，toFather
vue3 绑定对象区别 vue2 的 this 访问，调用table中cleatSort方法手动清空排序高亮状态。
youyudehan的博客
09-19 241
vue3 绑定对象区别 vue2 的 this 访问，调用table中cleatSort方法手动清空排序高亮状态。
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘XXX‘)解决办法
热门推荐
Drawing stars的博客
04-29 4万+
控制台报错如下： 错误产生的原因是前端需要展示的数据或v-model绑定的数据此时还未从后端读到。 我这里是在data里面有一个questionList[]，用来接收从后端传来的question对象，页面中部分组件绑定了questionList数组里的对象的属性（question.myAnswer），但时此时这个数组里没有对象，更没有对象的属性，故页面虽然能在获取到数据后正常展示，但是在此之前控制台会先报错。 部分界面如图： 对应vue代码如下 <!--作业问题 --> <div
vue3-浏览器告警解决: Extraneous non-emits event listeners (queryList, closeDialog) were passed to
wzy_PROTEIN的博客
06-09 5779
[Vue warn]: Extraneous non-emits event listeners (queryList, closeDialog) 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 li
JS控制台报错Uncaught TypeError Cannot read properties of null (reading ‘appendChild‘)；的解决方法
m0_67402914的博客
03-08 3043
当控制台出现Uncaught TypeError: Cannot read properties of null (reading ‘appendChild’)； 解决方法：将html文件中的script标签放在最下面或者中间。
[Vue warn] Extraneous non-emits event listeners (createSuccess) were passed to component but could
m0_67393342的博客
03-06 1078
vue3子组件向父组件传递方法时报错： 解决办法： 引入Options，然后再 emits中定义传出的方法即可
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘__composer‘)
脚步不停，信念不息！
06-24 1625
legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
Vue3 错误处理
lianyz
01-09 1万+
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'shapeFlag') at setVarsOnVNode (runtime-dom.esm-bundler.js:714) at setVars (runtime-dom.esm-bundler.js:705) at callWithErrorHandling (runtime-core.esm-bundler.js:6737)
vue子组件数组传值给父组件表格
04-06
可以使用Vue中的事件机制将子组件的数据传递给父组件，然后在父组件中将数据渲染到表格中。 具体步骤如下： 1. 在子组件中定义一个数组，并在模板中绑定一个事件，例如： ``` <template> <div> <button @click="addData">添加数据</button> <ul> <li v-for="item in dataList">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { dataList: [] } }, methods: { addData() { this.dataList.push('新数据') this.$emit('update:data', this.dataList) } } } </script> ``` 2. 在父组件中引入子组件，并定义一个表格和一个数据绑定数组，例如： ``` <template> <div> <my-component @update:data="updateData" /> <table> <thead> <tr> <th>序号</th> <th>数据</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData"> <td>{{ index + 1 }}</td> <td>{{ item }}</td> </tr> </tbody> </table> </div> </template> <script> import MyComponent from './MyComponent.vue' export default { components: { MyComponent }, data() { return { tableData: [] } }, methods: { updateData(data) { this.tableData = data } } } </script> ``` 3. 父组件中的updateData方法会接收到子组件发送的数据，然后将数据赋值给tableData数组，从而实现了子组件数组传值给父组件表格的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值