vue3警告[Vue warn]: Extraneous non-emits event listeners (getVal) were passed to component but could n

[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

浅浅一笑^*^

5102人浏览 · 2022-09-02 16:11:32

浅浅一笑^*^ · 2022-09-02 16:11:32 发布

报错问题如下:
[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. If the listener is intended to be a component custom event listener only, declare it using the “emits” option

翻译：
将无关的非发射事件侦听器（getVal）传递给组件，但无法自动继承，因为组件呈现片段或文本根节点。如果监听器仅用于组件自定义事件监听器，请使用“emits”选项声明它

要根据实际项目操作看那种方法适用:

解决方法一：

exoprt default defineComponent({
//方法一：//声明事件
emit('事件','参数传递')
}

解决方法二:

<template>
<div>
//for循环必须外层套一个根节点，否则就会出现警告
 <div  v-for="(item,index) in arr" :key="index" >
 //组件
 <component></component>
 </div>
 </div>
</template>

补充知识点：vue3.0的计算属性，扩展知识

//计算属性computed()
import {computed} from 'vue

在setup语法糖下书写方式:
//计算属性--简写
	let fullName=computed(()=>{
	//vue3中计算属性的函数如果只传入一个回调函数表示的是get
		return person.firstName+'-' +person.lastName
	)}
//计算属性--完整方式
let fullName=computed({
  //vue3中计算属性的函数中如果传入一个对象 表示的是get和set
		get(){
			return person.firstName+'-' +person.lastName
		},
		set(value){
			const nameArr=value.split('-')
			person.firstName=nameArr[0]
			person.lastName=nameArr[1]
		}
	})

总结:初始以为父子组件传值中的emit写法有问题，经过各种查找百度发现是根节点问题,完美解决。