Vue 组件通过上下文获取道具 [英] Vue component get props by context
问题描述
我是 VUE 世界的新手，我开始创建一个应用程序来呈现待办事项列表，我通过道具将待办事项传递给待办事项组件，我正在寻找另一种方法来将道具传递给子组件，例如反应你可以创建上下文来共享该数据.
Todo.vue
<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)"/></模板><脚本>从'./TodoItem.vue'导入TodoItem；导出默认{name: "Todos",成分: {待办事项},道具:[待办事项"]}<样式范围></风格>
TodoItem.vue
<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></模板><脚本>导出默认{name: "TodoItem",道具:[待办事项"]，方法: {标记完成(){this.todo.completed = !this.todo.completed;}}}<样式范围>.todo-item {背景:#f4f4f4；填充:10px；边框底部:1px #ccc 虚线；}.已完成 {文字装饰:行进；}.del {背景:#ff0000；颜色:#fff;边界:无；填充:5px 9px；边界半径:50%；光标:指针；浮动:对；}</风格>
当您询问如何在 VueJS 中的组件之间共享数据时，您可以通过谷歌搜索VueJs 中的状态管理"找到答案.我可以在这里总结一下，如果有我遗漏的地方，请在这里评论:
- 通过 props 传递数据，就像你已经在做的那样，数据直接从父级传递到子级.
- 由于数据不想那么直接地传递，您可以使用称为提升状态"的技术.
- 或者使用称为
eventBus的 Vue 特定技术. - Vue 中最标准的状态管理"方式显然是使用 VueX.
- 或其他状态管理库，如 Redux 等.
- 或者更高级别的事件，一个构建在 Vue 之上的框架，如 Nuxt.
- 阅读上面的评论后，我看到一种(非常疯狂:) 方法是使用
localStorage/cookies
I am new in the VUE world, I start creating an app to render a list of TODO's, I pass the todo by props to the todo component, I was looking for another way to pass props to child component like react that you can create a context to share that data.
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>
As you're asking ways to share data between components in VueJS, you can find the answers by googling "state management in VueJs". I can sum up here, please comment here if there's a thing I'm missing:
- Passing data by props as you're already doing, data passed directly from parent to child.
- As the data want to pass around not that direct, you can use the technique called "lift the state up".
- Or by using a Vue specific technique called
eventBus. - The most standard way to "state management" in Vue would obviously be using VueX.
- Or another state management libraries like Redux, etc.
- Or event higher level, a framework built on top of Vue like Nuxt.
- After reading a comment above, I see a (pretty crazy :) way here is to use
localStorage/cookies
这篇关于Vue 组件通过上下文获取道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
