Question

在我的vuejs应用程序中，我使用vue-router进行路由。除了这个之外，一切都很好。

在我的父母中，我的列表视图左侧有如下链接。

<div class="col-md-5">
<ul>
    ....
    <a v-link="{ name: 'task-detail', params: { taskId: task.id }}">{{ task.title }}</a>
</ul>
</div>

<div class="col-md-7">
  <router-view></router-view>
</div>

当我点击它时，我的嵌套路线被激活，我在右侧显示详细视图。

现在我的问题是在我的父视图中，我可以切换任务是否完成。

我有一个标签，显示在子视图中是否完成了任务。

<label class="label label-success pull-right" v-show="task.is_completed">Completed</label>

当我在父视图中执行此操作时，如何反映子视图的状态更改。我需要刷新页面吗？还是有更简单的解决方案。

简单来说当我在父视图上切换完成状态时，我的标签应该在子视图上更改。

Answer 1

因此，vue希望您实施“向上/向下操作”数据。图案。因此，如果您的数据在父项中加载（例如作为集合）并再次加载 - 在您的孩子中单独加载（例如作为模型实例） - 您有两组以相同数据开头的内容。但是当你改变一个，它独立于另一个。所以，您要么需要在两者之间进行通信（这可能是繁琐的），使用中央数据存储，其中两条路由都访问相同的数据实例（如果您倾向于，可能使用Vuex），或者如果您有集合中需要的所有数据，只需将其传递到下游，例如： <router-view :task="selectedTask" />所选任务由您网址中的$route.params.id驱动（可能是父级中的计算属性）

例如，如果您的任务列表被调用＆＃39;任务＆＃39;在父级中，您的计算属性可能如下所示（在ES6 JS中）：

selectedTask () {
  return this.tasks.find(t => t.id === this.$route.params.id)
}

这种数据删除是最容易实现的，但是如果您发现这么做很多，建议您使用中央数据存储。

Answer 2

如果您在子视图<label class="label label-success pull-right" v-show="$parent.task.is_completed">Completed</label>

中尝试此操作，是否有效

Vue js使用Vue-Router同步父数据和子数据

2 个答案: