鍍金池/ 問答/HTML/ vuejs中sync修飾符怎么使用？

vuejs中sync修飾符怎么使用？

研究學(xué)習(xí)vuejs的sync修飾符：
sync-修飾符

當(dāng)使用一個(gè)對(duì)象一次性設(shè)置多個(gè)屬性的時(shí)候，這個(gè) .sync 修飾符也可以和 v-bind 一起使用：
<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

我使用

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

測(cè)試發(fā)現(xiàn)這種代碼是無效的，是不是我哪里寫錯(cuò)了？改寫成：

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

就可以了。

使用的vuejs是2.5.13版本。為此我專門做了測(cè)試頁(yè)面：
測(cè)試頁(yè)面

clipboard.png

回答
編輯回答
赱丅呿

你寫的那種方式綁定的對(duì)象不在data里，不會(huì)觸發(fā)依賴檢測(cè)

2018年9月21日 04:44
編輯回答
假灑脫

引文來源是什么？

v-bind 需要指定綁定到子組件的哪個(gè) prop 上，v-bind.sync 不是一個(gè)正確的綁定語(yǔ)法。

2017年5月26日 14:53
編輯回答
吢涼

自己測(cè)試了下，發(fā)現(xiàn)改成下面這種可以生效：
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
        }
    }
}
2018年3月30日 18:41
編輯回答
故林
<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

這種綁定是成功的，只是這是一個(gè)你沒法控制的對(duì)象

2018年1月30日 18:58