vue 3 发出警告“无关的非发射事件监听器”

Question

我正在尝试使用组合 API 将数据从子项发送到父项我收到以下警告。[Vue 警告]：无关的非发射事件侦听器 (updatedcount) 已传递给组件但无法自动继承，因为组件呈现片段或文本根节点。如果侦听器仅用作组件自定义事件侦听器，请使用“emits”选项声明它。在 <HelloWorld onUpdatedcount=fn > at子组件.vue<template>  <h1>{{ store.count }}</h1>  <button @click="fired">click me</button></template><script>import useStore from "../store/store.js";export default {  name: "HelloWorld",  setup(_,{ emit }) {    const store = useStore();    const fired = () => {      store.count++;      emit("updatedcount", store.count);    };    return {      store,      fired    };  },};</script>父组件.vue<template>  <div>    {{ hello }}    <br />    <br />    <input type="text" v-model="hello.searchQuery" />    <br><br>    <button @click="hello.count--">click me too!</button>    <hello-world @updatedcount="mydata" />  </div></template><script>import HelloWorld from "./components/HelloWorld.vue";import useStore from "./store/store.js";export default {  components: {    HelloWorld,  },  setup() {    const hello = useStore();    function mydata(event) {      console.log(event);    }    return {      hello,      mydata    };  },};</script>

Answer 1

我认为您需要emits在组件中定义：

export default {

  name: "HelloWorld",

  emits: ["updatedcount"], // <--- add this line

  setup(_,{ emit }) {

    ...

  },

};

Answer 2

更新：

在 vue 3 脚本设置中你会做

const emits = defineEmits(["updatedcount"])

emits("updatedcount", store.count);

Answer 3

当在我自己的 vue 3 应用程序中看到此错误时，我发现将组件的模板内容包装在一个空的 div 中可以解决我认为与错误消息的“无法自动继承”部分有关的问题。

似乎 vue 的工作方式是 vue 将尝试对 @click 和 @input 等常见事件使用属性继承以传递给底层元素，但是当组件的根部有多个同级元素时，它不知道要传递哪个选择。

请注意，这些事件可能会改变某些行为，因为新的包装父 div 现在将直接绑定到它的事件。

<template>

  <div>

    <h1>{{ store.count }}</h1>

    <button @click="fired">click me</button>

  </div>

</template>

Answer 4

在 vue3 中你必须定义 emits，你的子组件看起来像这样：

子组件.vue：

    <template>

      <h1>{{ store.count }}</h1>

      <button @click="fired">click me</button>

    </template>

    

    <script>

    import useStore from "../store/store.js";

    export default {

      name: "HelloWorld",

      emits :{

          updatedcount: null, <--- add this lines

        },

      data: () => ({

            store: useStore(),

      }),

      methods:

        fire () {

          store.count++;

          this.$emit("updatedcount", store.count);

        },

      

    };

    </script>