自定義 Vue 中的 v-model 雙向綁定

自定義 Vue 中的 v-model 雙向綁定

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

v-model 雙向綁定實際上就是經過子組件中的 $emit 方法派發 input 事件，父組件監聽 input 事件中傳遞的 value 值，並存儲在父組件 data 中；而後父組件再經過 prop 的形式傳遞給子組件 value 值，再子組件中綁定 input 的 value 屬性便可。

咱們着手實現一遍：

子組件傳值

首先子組件須要一個 input 標籤，這個 input 標籤須要綁定 input 事件，$emit 觸發父組件的 input 事件，經過這種方法子組件傳遞值給父組件

<input type="text" @input="$emit('input', $event.target.value)">

父組件監聽 input 事件，而後將事件攜帶的 input 輸入的值傳入到 data 狀態中

<my-comp @input="value = $event"></my-comp>

export default {
  // ...
  data () {
    return {
      value: 'initial value' // 維護一個 value 狀態
    }
  }
}

至此子組件監聽 input 事件，用戶輸入字符串便可被父組件獲取到並保存在 data 狀態中

父組件傳值

而後父組件還須要將 value 值傳遞給子組件，子組件再綁定 value 值到 input 的 value 屬性上

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

增長 :value="value" 經過 prop 傳遞 value

子組件中綁定 input 的 value 屬性

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

注意 props 中須要設定 value

export default {
  name: 'MyComp',
  props: ['value']
}

至此自定義的 v-model 處理完畢，看看效果：

其餘元素使用 v-model

在 input 上使用 v-model 比較簡單，但考慮到其餘元素不必定是要監聽 input 事件而是 change 事件，也不必定是 value 屬性改變元素的內容。好比 checkbox，咱們就須要監聽 change 事件，以及 checked 屬性。

那麼先手動實現一遍：

<input type="checkbox" @change="$emit('change', $event.target.checked)" :checked="checked">

子組件首先監聽 change 事件，並 $emit 方法觸發父組件的 change 事件，將 checked 屬性值傳入給父組件；同時接收父組件傳遞進來的 checked 值，根據 checked 值決定 input 元素的 checked 屬性。

export default {
  name: 'MyComp',
  props: ['checked']
}

而後須要修改父組件：

<my-comp @change="checked = $event"></my-comp>

export default {
    // ...
  data () {
    return {
      checked: false
    }
  }
}

父組件監聽 change 事件，並在 data 中維護狀態 checked，默認值爲 false

最後看看效果：

直接使用 v-model 指令

此外還可直接使用 v-model 指令：

<my-comp v-model="checked"></my-comp>

但須要在組件中修改 v-model 指令，指定 prop 和 event：

export default {
  name: 'MyComp',
  props: ['checked'],
  model: {
    prop: 'checked',
    event: 'change'
  }
}

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊