Vue 组件通过上下文获取道具

Question

我是 VUE 世界的新手，我开始创建一个应用程序来渲染待办事项列表，我通过 props 将待办事项传递给待办事项组件，我正在寻找另一种将 props 传递给子组件的方法，例如 react 您可以创建一个上下文来共享该数据。

Todo.vue

<template>
<div>
<div v-bind:key="todo.id" v-for="todo in todos">
<TodoItem v-bind:todo="todo" v-on:del-todo="$emit('del-todo', todo.id)" />
</div>
</div>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default {
name: "Todos",
components: {
TodoItem
},
props: ["todos"]
}
</script>
<style scoped>
</style>

TodoItem.vue

<template>
<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
<p>
<input type="checkbox" v-on:change="markComplete" v-bind:checked="todo.completed">
{{todo.title}}
<button @click="$emit('del-todo', todo.id)" class="del">x</button>
</p>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todo"],
methods: {
markComplete() {
this.todo.completed = !this.todo.completed;
}
}
}
</script>
<style scoped>
.todo-item {
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete {
text-decoration: line-through;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
</style>

Answer 1

当你询问在 VueJS 中的组件之间共享数据的方法时，你可以通过谷歌搜索"VueJs 中的状态管理"来找到答案。我可以在这里总结一下，如果我缺少什么，请在这里发表评论：

像

• 你已经做的那样通过道具传递数据，数据直接从父级传递到子级。
• 由于数据想要传递不是那么直接，因此您可以使用称为"提升状态"的技术。
• 或者通过使用称为eventBus的 Vue 特定技术
。
• 在 Vue 中"状态管理"的最标准方法显然是使用 VueX。
• 或者另一个状态管理库，如 Redux 等。
• 或者更高层次的事件，一个建立在 Vue 之上的框架，如 Nuxt。
• 阅读上面的评论后，我看到了一个(非常疯狂的:)这里的方法是使用localStorage/cookies