vue 3 发出警告“ Extraneous non-emits event listeners”

我试图使用组合API将数据从子项发送到父项。

我得到了以下的警告。

[Vue warn]: Extraneous non-emits event listeners (updatedcount) 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.at <HelloWorld onUpdatedcount=fn > at

childcomponent.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>

parentcomponent.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>

我认为你需要在你的组件中定义emits。https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events

export default {
  name: "HelloWorld",
  emits: ["updatedcount"], // <--- add this line
  setup(_,{ emit }) {
    ...
  },
};

更新的内容。

在vue 3的脚本设置中，你要做的是

const emits = defineEmits(["updatedcount"])

emits("updatedcount", store.count);

当我在自己的vue 3应用程序中看到这个错误时，我发现将一个组件的模板内容包裹在一个空的div中可以解决我的问题，我相信这与错误信息中的" could not be automatically inherited"部分有关。

似乎vue的工作方式是，vue会尝试使用属性继承来处理@click和@input这样的普通事件，以传递给底层元素，但当一个组件的根部有多个兄弟姐妹元素时，它不知道该选择哪一个。

请注意，这些事件可能会改变一些行为，因为新的包装父 div 现在会有直接与之相连的事件。

<template>
  <div>
    <h1>{{ store.count }}</h1>
    <button @click="fired">click me</button>
  </div>
</template>

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

childcomponent.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,
        },
      data: () => ({
            store: useStore(),
      }),
      methods:
        fire () {
          store.count++;
          this.$emit("updatedcount", store.count);
        },
      
    };
    </script>