vue 3 gibt Warnung aus “Externe Non-Emits-Ereignis-Listener”

Ich versuche, mithilfe der Kompositions-API Daten vom Kind an das Elternteil zu senden

Ich bekomme folgende Warnung.

[Vue warn]: Überflüssige Non-Emits-Ereignis-Listener (updatedcount) wurden an die Komponente übergeben, konnten aber nicht automatisch vererbt werden, da die Komponente Fragment- oder Textstammknoten rendert. Wenn der Listener nur ein Komponenten-Listener für benutzerdefinierte Ereignisse sein soll, deklarieren Sie ihn mit der Option “emits”.at 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>

Ich denke, Sie müssen das definieren emits in deiner Komponente: https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events

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

aktualisieren:

in vue 3 Skript-Setup würden Sie tun

const emits = defineEmits(["updatedcount"])

emits("updatedcount", store.count);

Wenn ich diesen Fehler in meinen eigenen vue 3-Apps sehe, habe ich festgestellt, dass das Umhüllen des Vorlageninhalts einer Komponente in ein leeres div das Problem für mich behebt, von dem ich glaube, dass es mit dem Teil der Fehlermeldung „konnte nicht automatisch vererbt werden“ zusammenhängt.

Es scheint, dass vue so funktioniert, dass vue versucht, die Attributvererbung für allgemeine Ereignisse wie @click und @input zu verwenden, um sie an zugrunde liegende Elemente weiterzugeben, aber wenn es mehrere gleichgeordnete Elemente am Stamm einer Komponente gibt, weiß es nicht, welches wählen.

Seien Sie gewarnt, dass diese Ereignisse einige Verhaltensweisen ändern könnten, da das neue umhüllende übergeordnete Div nun direkt mit Ereignissen verknüpft ist.

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

In vue3 müssen Sie Emits definieren, Ihre untergeordnete Komponente würde so aussehen:

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