时间戳

首页 > 解决方案 > Vue 组件通过上下文获取 props

javascript - Vue 组件通过上下文获取 props

问题描述

我是 VUE 世界的新手，我开始创建一个应用程序来呈现 TODO 列表，我通过道具将 todo 传递给 todo 组件，我正在寻找另一种将道具传递给子组件的方法，比如你可以创建一个 react共享该数据的上下文。

待办事项

<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>

标签： javascriptreactjsvue.js

解决方案

当您询问如何在 VueJS 中的组件之间共享数据时，您可以通过谷歌搜索“VueJs 中的状态管理”找到答案。我可以在这里总结一下，如果有我遗漏的东西，请在这里评论：

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

推荐阅读