javascript - 如何在 Vuejs 中的 3 个组件之间传输数据？

Question

我是新手Vue.js，我想做一个简单的待办事项应用程序。我有一个新项目的模板，然后，当填充数据时，我单击添加按钮，将新项目推送到最终列表。问题是我的添加按钮位于另一个部分，所以我没有父子连接。这是我的模型（红线是部分分隔符）。我已经阅读了很多关于堆栈溢出的文章和相同的问题，但我发现它们对我的情况并没有真正的帮助。

这是我的模板代码：

<template>
    <div ref="template" class="task-template">
        <div class="task-template__wrapper">
            <div class="task-template__input">
                <input v-model="todo.header" :value="todo.header" ref="header" class="task-template__header" type="text" placeholder="Название задачи" @input="triggerEvent">
            </div>
            <div class="task-template__input">
                <input v-model="todo.description" :value="todo.description" ref="description" class="task-template__description" type="text" placeholder="Описание" @input="triggerEvent">
            </div>
        </div>
        <div class="task-template__actions">
            <div class="task-template__actions_inner">
                <inline-svg class="task-template__btn hover" alt="Подзадачи"
                            :src="getImageUrl(`bulleted-list.svg`)"></inline-svg>
                <inline-svg class="task-template__btn" alt="Добавить в группу"
                            :src="getImageUrl(`folder.svg`)"></inline-svg>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TodoTemplate",
    props: {
        todo: {
            header: "",
            description: "",
            tasks: [],
            groups: []
        }
    },
    methods: {
        triggerEvent(todo) {
            this.$emit('input', todo);
        }
    }
}

对于添加按钮：

<template>
    <div class="add-button" @click="submit">
        <div class="add-button__container">
            Добавить задачу
        </div>
    </div>
</template>

<script>

export default {
    name: "CreateTodo",
    data() {
        return {
            todo: {
                header: "",
                description: "",
                tasks: [],
                groups: []
            }
        }
    },
    methods: {
        submit: () => {
            this.$emit("saveData", )
        }
    }
}
</script>

对于列表：

<template>
    <section>
        <TodoTemplate></TodoTemplate>
        <ul class="todo">
            <TodoItem v-for="todo in todos" :title="todo.header" :key="todo"></TodoItem>
        </ul>
    </section>
</template>

<script>
import TodoTemplate from "@/components/TodoTemplate/TodoTemplate";
import TodoItem from "@/components/TodoItem/TodoItem";

export default {
    name: "TodoList",
    components: {TodoItem, TodoTemplate},
    data() {
        return {
            todos: [
                {
                    header: '  Купить шампанское',
                    description: '"Dom Perignon", Rose Vintage 2003 Brut',
                    tasks: [],
                    groups: []
                }
            ]
        }
    },
    methods: {
        addTodo(todo) {
            this.todos.push({
                header: todo.header,
                description: todo.description,
                tasks: todo.tasks,
                groups: todo.groups
            })
        }
    }
}
</script>

有没有什么方法可以在没有额外的库的情况下做到这一点Vuex？或者我应该合并这两个部分？谢谢！

标签： javascriptvue.jsvue-component