Ian Chen

在與物件傳遞資料時，可以使用 .sync 修飾詞省略一些程式碼

<div id="app">
  <test :name.sync="myName"></test>
  <div>{{myName}}</div>
</div>

new Vue({
  el:"#app",
  data:{
    myName:"My"
  },
  
  components:{
    test:{
      props:["name"],
      data(){
        return {
          innerName : this.name
        }
      },
      template:`
        <div>
          <input type="text" v-model="innerName"/>
          <button @click="sync">button</button>
        </div>
      `,
      methods:{
        sync(){
          this.$emit("update:name",this.innerName);
        }
      }
    }
  }
});

１．在父元素傳遞 myName 到組件的 name，並且加上 .sync

２．在組件內可以直接使用 this.emit("update:<prop name>","<value>") 直接同步值到父組件的 myName