2024-08-21 关于vue3中使用emit的一些笔记

问题1：emit is not defined

watch(() => content.value, (val) => {
emit('input', val);
});

原因：直接使用了未定义的emit导致报错。

解决方案：使用vue3中的defineEmits函数定义一个可以定义触发的函数，比如

const emit = defineEmits(['input']);

此处的emit只是一个变量，你可以自定义变量名，不固定叫做emit。

正确代码：

const emit = defineEmits(['input']);

watch(() => content.value, (val) => {
    emit('input', val); 
});

 

问题2：Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

中译：  组件发出了事件“input”，但它既没有在emissions选项中声明，也没有作为“onInput”道具声明。

出错代码：

const emit = defineEmits(['update:modelValue']);

watch(() => content.value, (val) => {
    emit('input', val); 
});

原因：你声明了emit，但是当你使用emit的时候，触发的事件名为input，而不是定义好的update:modelValue，所以才报错。

解决方案：校正emit事件名。

 

正确代码：

const emit = defineEmits(['update:modelValue']);

watch(() => contentText.value, (val) => {
    emit('update:modelValue', val); 
});