2.3.0+ 新增
在有些情況下，我們可能需要對一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來維護(hù)上的問題，因?yàn)樽咏M件可以變更父組件，且在父組件和子組件都沒有明顯的變更來源。
這也是為什么我們推薦以 update:myPropName 的模式觸發(fā)事件取而代之。舉個(gè)例子，在一個(gè)包含 title prop 的假設(shè)的組件中，我們可以用以下方法表達(dá)對其賦新值的意圖：
this.$emit('update:title', newTitle)
然后父組件可以監(jiān)聽那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù) property。例如：
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
為了方便起見，我們?yōu)檫@種模式提供一個(gè)縮寫，即 .sync 修飾符：
<text-document v-bind:title.sync="doc.title"></text-document>
注意帶有 .sync 修飾符的 v-bind 不能和表達(dá)式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。取而代之的是，你只能提供你想要綁定的 property 名，類似 v-model。
當(dāng)我們用一個(gè)對象同時(shí)設(shè)置多個(gè) prop 的時(shí)候，也可以將這個(gè) .sync 修飾符和 v-bind 配合使用：
<text-document v-bind.sync="doc"></text-document>
這樣會(huì)把 doc 對象中的每一個(gè) property (如 title) 都作為一個(gè)獨(dú)立的 prop 傳進(jìn)去，然后各自添加用于更新的 v-on 監(jiān)聽器。
將 v-bind.sync 用在一個(gè)字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因?yàn)樵诮馕鲆粋€(gè)像這樣的復(fù)雜表達(dá)式的時(shí)候，有很多邊緣情況需要考慮。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>使用sync更改父級傳值</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
Vue.component("ComponentA", {
props:["info"],
template:`
<div>
我是子節(jié)點(diǎn)
<button @click="handleClick">點(diǎn)擊我改變父級</button>
</div>
`,
methods: {
handleClick() {
let arr = [1,2,3]
this.$emit("update:data", arr);
}
},
})
const app = new Vue({
el:"#app",
data:{
info:{
data:[]
},
},
template:`
<div>
我是父級節(jié)點(diǎn)
<ComponentA :data.sync="info.data"></ComponentA>
{{info.data}}
</div>
`,
})
</script>
</body>
</html>
