iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

每天來點 Vue.js 吧系列 第 21

Vue component 上該如何使用 v-model ?

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 需進行如下設定,便可以將 父組件 數據傳入 子組件子組件 也可以透過 自定義事件 拋出要給 父組件 的數據:

  • 子組件 註冊名為 valueprop
  • 子組件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

上一篇
Vue 自定義事件 - 拋出子組件數據
下一篇
Prop Validation
系列文
每天來點 Vue.js 吧30

1 則留言

0
尾椎
iT邦新手 5 級 ‧ 2020-12-13 23:20:00
  • 請問,為什麼我使用自封閉的<my-component v-model="number"/>,是無效的? (改成 <my-component v-model="number"></my-component> 才正常。
  • 另外 new Vue 自帶template時,html還是要有一個 class="app" 的物件對吧? 那這樣自帶template有什麼好處嗎? (想不到適合的使用情境)
// 子組件
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>`
});

我要留言

立即登入留言