tags: Vuejs

v-model ✐

v-model 作用於表單元件上時，是 雙向數據綁定 的語法糖：

<input v-model="number">

等價於 v-bind="number" 以及 @input="number = $event.target.value" 兩者：

<input :value="number" 
       @input="number = $event.target.value">

component 上使用 v-model

不作用於表單元件，而是作用於 component 時，則下列程式碼：

<my-component v-model="number"/>

等價於：

<my-component :value="number" 
              @input="number = $event"/>

若是需要在組件使用 v-model 語法，組件需要設定 prop、自定義事件：

// 子組件
Vue.component("my-component", {
  props: ["value"],
  template: `<input :value="value" @input="$emit('input', $event.target.value)">`
});

// 父組件
const vm = new Vue({
  el: ".app",
  data: {
    number: 0
  },
  template: `
<div class="app">
  <my-component v-model="number"/>
  <p>{{ number }}</p>
</div>`
});

上方子組件使用 v-model 需進行如下設定，便可以將 父組件 數據傳入 子組件，子組件 也可以透過 自定義事件 拋出要給 父組件 的數據：

• 在 子組件 註冊名為 value 的 prop
• 子組件 在 input 觸發時需定義自定義事件 input，並且設置要傳出的 子組件 數據

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification
▶︎ 同步更新於個人 Blog Ruru-Blog

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x
2. 想入門，我陪你 Re Vue 重頭說起｜Day 11：組件自定事件與通知 - YouTube
3. Vue Component 也可以用 v-model - 《Chris 技術筆記》
4. Use v-model On Custom Vue Component - Paulund