Ian Chen

若想要在使用組件時，使用 v-model 自訂想要綁定的資料，可以透過以下方式自訂 v-model 的行為

• 預設會綁定 value，觸發的事件則是 input

<div id="app">
  {{testName}}
  <test v-model="testName"></test>
</div>

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

１．在組件上加入 model 的屬性

• 參數 prop 是指定要綁定哪一個 prop
• 參數 event 是指定在父元素會監聽哪個事件名稱

２．接著在父元素就可以直接使用 v-model，讓組件自行決定要綁定的prop以及觸發的事件