Schlagwort: emit

Wenn Daten als Props von der Root-Komponente an die unteren Kind-Komponenten übergeben werden und die Datenhaltung in der Elternkomponente stattfindet, können die Daten bspw. über eigene Ereignishandler hochgereicht werden, um diese hinzuzufügen.

Bspw.
Elternkomponente -> Kind -> Enkelkind
APP.vue -> StatusCard.vue -> NewTask.vue

Um Daten von NewTask an APP.vue ( Datenhaltung) zu übertragen, nutzen wir:

this.$emit('custom-ereignis',payload);

In der höheren Komponente können wir das Ereignis dann abfangen.

<NewTask v-if="newTasks" @custom-ereignis="createNewTask"></NewTask>

#NewTask.vue
<button class="btn btn-secondary" @click="submitTask">Eintragen</button>

export default {
emits: {
    "new-task": (task) => {
      if (task.content === "") {
        console.warn("Der Content sollte nich leer sein");
        return false;
      }
      return true;
    },
  },
 data() {
    return {
      content: "",
    };
  },
  methods: {
    submitTask() {
      this.$emit("new-task", {
        //Payload
        content: this.content,
      });
      this.content = "";
    },
  },
}

#StatusCard.vue
<NewTask v-if="newTasks" @new-task="createNewTask"></NewTask>

 emits: {
    "new-task": (task) => {
      if ("status" in task === false) {
        console.warn(
          "StatusCardComponent: Jede Aufgabe muss ein Status-Attribut haben."
        );
export default {
  name: "StatusCard",
  components: {
    Task: OneTask,
    NewTask,
  },
  emits: {
    "new-task": (task) => {
      if ("status" in task === false) {
        console.warn(
          "StatusCardComponent: Jede Aufgabe muss ein Status-Attribut haben."
        );
        return false;
      }
      return true;
    },
  },
  props: {
    // card: {
    //   type: Object,
    // },
    title: String,
    titleClasses: String,
    status: Number,
    newTasks: Boolean,
    tasks: {
      type: Array,
    },
  },
  computed: {
  },
  methods: {
    createNewTask(task) {
      console.log(task);

      // Nicht möglich, da task als PROP übergeben wurde und Urheber der Daten ist App.vue
      // this.tasks.push(task);

      task.status = this.status;
      this.$emit("new-task",task);
    },
  },
};
</script>