2022-09-13 09:22

vue3组件中抛出事件防止declare it using the options警告

王姐姐

WEB前端

(1882)

(0)

收藏

vue3中 子组件通过emit抛出事件(proxy.$emit),出现如下警告但不影响使用:

Extraneous non-emits event listeners (addSuccess) 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.

解决方法,需要在emits中定义抛出的事件名:

<template>
    <input type="text" :value="name" @input="$emit('update:name', $event.target.value)">
    <input type="text" :value="title" @input="$emit('update:title', $event.target.value)">
    <input type="text" @input="$emit('otherev', $event.target.value)">
</template>

<script>
    export default {
        props: {
            name: String,
            title: String
        },
        // 定义抛出的事件名称
        emits: ["update:name", 'update:title']
    }

</script>

setup语法糖,那么就不能这么使用emit了,需要引入defineEmits:

<script setup name="addSubsidyReceiver">
    import {
        addSubsidyReceiver,listVillageBank
    } from "@/api/wm/subsidyReceiver";
    import {ref, watch} from "vue";
    import { defineEmits } from 'vue'
    // 定义抛出的事件名称
    const emit = defineEmits(["addSuccess","update:modelValue"])
       ......
    //proxy.$emit("addSuccess");要用下面方法抛出事件
    emit("addSuccess");
       ......
    </script>

0条评论

点击登录参与评论