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>