在使用vue3的过程中发生了如下警告:
虽然说不影响代码的运行,但是看着很不爽
字面意思是:
组件发出的事件“clickChild”,但它既没有在发出选项中声明,也没有作为“onClickChild”道具声明。
出现原因:子组件没有定义changeRoute1函数且在父组件中使用
例如:
在子组件中定义的是changeRoute
传回去的却是changeRoute1
父组件使用的也是changeRoute1
解决办法:
把函数名改一致
例如:
子组件Child.vue
<template>
<button @click="changeRoute()"></button>
</template>
<script setup>
import {defineEmits} from "vue";
const emit = defineEmits(['changeRoute'])
const changeRoute = () => {
//传递给父组件
emit('changeRoute', "test")
}
</script>
父组件Father.vue
<template>
<div>
<h1>{{ title }}</h1>
<router-view @changeRoute="clickEven"/>
</div>
</template>
<script setup>
import {ref} from "vue"
const title = ref("")
const clickEven = (val) => {
title.value = val
}
</script>
红色框中的函数名要一致
希望能帮助到你,多谢关照