为什么 Vue .sync 命令在路由器视图中不起作用？

Question

我正在尝试使用 Vue 中的 .sync 命令在组件之间同步变量。当我使用标签将组件放入页面时，它可以正常工作（例如：<my-component></my-component>）。当我将它绑定到<router-view> 时，它只能单向工作。正常吗？

当我点击组件内的链接时，它不会改变根 Vue 对象中test 的值。当我在根对象中更改它时，组件会正确继承该值。

Click here for an example

Answer 1

您正在尝试直接更新道具，更新它的正确方法是发出更新。记住 :test.sync 是 shorthand 到 v-bind:test 和 v-on:update:test

在你的 Foo 组件上：

editTest: function() {     
  this.$emit('update:test', false)  // instead of this.test = false;        
}

小提琴：https://jsfiddle.net/hansfelix50/u7k5qpwz/