深入理解.sync修飾符

.sync修飾符

一個組件上只能定義一個v-model，如果其他prop也要實現雙向綁定的效果該怎么辦呢？ 簡單的方法是子組件向父組件發送一個事件，父組件監聽該事件，然后更新prop。具體如下：

// info.vue組件定義了一個value 屬性， 和一個valueChanged事件
<template> <div> <input @input="onInput" :value="value"/> </div> </template> <script> export default { props: { value: { type: String } }, methods: { onInput(e) { this.$emit("valueChanged", e.target.value) } } } </script>

父組件index.vue

<template> <info :value="myValue" @valueChanged="e => myValue = e"></info> </template> <script> inport info from './info.vue'; export default { components: { info, }, data() { return { myValue: 1234, } }, } </script>

上述寫法太麻煩了，通過.sync可以簡化上面代碼，只需要修兩個地方：

1. 組件內觸發的事件名稱以“update:myPropName”命名，相應的上述info組件改為 update:value
2. 父組件v-bind:value 加上.sync修飾符，即 v-bind:value.sync
   這樣父組件就不用再手動綁定@update:value事件了。

用法1: v-bind:prop.sync="propvalue"

// info.vue組件 ... methods: { onInput(e) { this.$emit("update:value", e.target.value) } }

// index.vue組件 <info :value.sync="myValue"></info>

用法2 v-bind.sync="obj"

如果一個組件的多個prop都要實現雙向綁定，根據上面學到的知識，只需要每個prop加sync修飾符

<info :a.sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2"></info>

這樣寫太麻煩，vue提供了一種更簡便的方法， v-bind.sync = "對象"

<info v-bind.sync="obj"></info> ... <script> .. data() { obj: {a: '', b: '', c: '', d: ''} } .. </script>

注意：

帶有.sync修飾符的v-bind不能喝表達式一起使用（例如 v-bind:title.sync = "doc.title + '!'"是無效的）。取而代之的是，你只能你想要綁定的屬性名。

小結

一個組件需要提供多個雙向綁定的屬性時使用，只能選用一個屬性來提供 v-model 功能，但如果有其他屬性也要提供雙向綁定，就需要.sync