vuejs中sync修饰符怎么使用？

Question

研究学习vuejs的sync修饰符：
sync-修饰符

当使用一个对象一次性设置多个属性的时候，这个 .sync 修饰符也可以和 v-bind 一起使用：
<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

我使用

<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

测试发现这种代码是无效的，是不是我哪里写错了？改写成：

<comp-component
            :foo.sync="localFoo"
            :bar.sync="localBar"
    ></comp-component>

就可以了。

使用的vuejs是2.5.13版本。为此我专门做了测试页面：
测试页面

Answer 1

自己测试了下，发现改成下面这种可以生效：
template:

<comp :foo.sync="cur.foo" :bar.sync="cur.bar"></comp>
<comp v-bind.sync="cur"></comp>

script:

components: {comp},
data () {
    return {
        cur: {
            foo: 100,
            bar: 100
        }
    }
}

Answer 2

<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

这种绑定是成功的，只是这是一个你没法控制的对象

Answer 3

你写的那种方式绑定的对象不在data里，不会触发依赖检测

Answer 4

引文来源是什么？

v-bind 需要指定绑定到子组件的哪个 prop 上，v-bind.sync 不是一个正确的绑定语法。