[Vue] 進階API-元件的v-model

TL;DR

在使用元件時，有時候希望外層元件可以跟內層元件資料可以響應。這時候可以使用v-model搭配props以及$emit來達成。並且可以綁定複數的狀態在同一個元件上給元件使用。

參考資料

相關連結

• 元件v-model | Official

---

語法

html(#app)

<div id="app">
  <div class="p-5">
    <h2>將元件內的值傳回 v-model（update:modelValue）</h2>
    {{ name }}
    <custom-input
     v-model:text="name"
    >
    </custom-input>
  </div>
</div>

vue

const app = Vue.createApp({
  data() {
    return {
      name: '小明',
    }
  }
});
// $emit('update:text', $event.target.value) 搭配 props，可以將更新後的值寫回 v-model 內
app.component('custom-input', {
  props: ['text'],
  template: `<input type="text"
  :value="text"
  @input="$emit('update:text',$event.target.value)"
  class="form-control">`
});
app.mount('#app');

重點事項

外層同樣遵守props的口訣：前內後外

內層透過:value去綁定外層的狀態並將之渲染出來
再透過@input的事件去將內層變動的值傳回外層所綁定的v-model上

需注意update後接著的是props內所定義的名稱

同元件綁定多個v-model

在同一個元件上，可以綁定多個v-model：

html(#app)

<div id="app">
  <div class="p-5">
    <h2>多個 v-model</h2>
    {{ text }} / {{ text2 }}
    <custom-input2 v-model:t1="text" v-model:t2="text2"></custom-input2>
  </div>
</div>

vue

const app = Vue.createApp({
  data() {
    return {
      text: '這是文字片段 1',
      text2: '這是文字片段 2'
    }
  }
});

// $emit('update:text', $event.target.value) 搭配 props，可以將更新後的值寫回 v-model 內
app.component('custom-input2', {
  props: ['t1', 't2'],
  template: `
  <input type="text"
  :value="t1"
  @input="$emit('update:t1',$event.target.value)"
  class="form-control">

  <input type="text"
  :value="t2"
  @input="$emit('update:t2',$event.target.value)"
  class="form-control">
  `
})

app.mount('#app');