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
·
报错问题如下:
[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写法有问题,经过各种查找百度发现是根节点问题,完美解决。
更多推荐
所有评论(0)