[Vue]組件——.sync 修飾符實現對prop 進行“雙向綁定”（子組件向父組件傳值）

 

一、同時設置1個 prop

1.以 update:my-prop-name 的模式觸發事件，如對於title屬性：

this.$emit('update:title', newTitle)

2.然后父組件可以監聽那個事件並根據需要更新一個本地的數據屬性：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

為了方便起見，我們為這種模式提供一個縮寫，即 .sync 修飾符：

<text-document v-bind:title.sync="doc.title"></text-document>

二、同時設置多個 prop

當我們用一個對象同時設置多個 prop 的時候，也可以將這個 .sync 修飾符和 v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>

這樣會把 doc 對象中的每一個屬性 (如 title) 都作為一個獨立的 prop 傳進去，然后各自添加用於更新的 v-on 監聽器。