Vue 自定義v-model

今天在用Vue寫組件的時候，由於業務需要，需要用到動態組件，由於組件傳值使用的是$emit,感覺這玩意要在父組件接收，覺得有點麻煩，不是我想要的，因此看了一下自定義v-model，挺好使，就記錄一下；

官網的介紹：動態組件

<input v-model="something">

其實就是下面的語法糖

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

用到組件上就是這個樣子

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

簡單來說 就是需要

• 接收一個來自 組件props屬性的值（可以是任意值）
• 一個觸發事件名稱：可以是任意的值

重點：

看到很多文章介紹v-model的時候 都是使用input做案例，其實用什麼都不是重要的，用input標籤在於 他支持一些屬性如 change、 blur 這類內置的事件，我們完全可以自定義成我們自己想要的東西。

案例

子組件

<template>
   <div class="childComponent">
       <el-button @click="handelParent"></el-button>
   </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'childComponent',
  model:{
      prop: 'custom',  // 自定義prop屬性
      event: 'hand'    // 自定義它的觸發方法名
  },
  props:{
      custom:{
          type: String,
          default(){
              return 'this is child'
          }
      }
  },
  data() {
    return {}
  },
  methods: {
    handelParent(){
        this.$emit('hand','dodododdo')
    }
  },
  components: {}
}
</script>

<style scoped>
</style>

父組件

<template>
   <div class="">
{{data}}
    <child v-model="data"></child>
   </div>
</template>

<script type="text/ecmascript-6">
import child from './components/demo1/child'

export default {
  name: '',
  data() {
    return {
      data: '',
    }
  },
  components: {
    child
  }
}
</script>

<style scoped lang="">
</style>

結果截圖：

總結

1. 自定義組件可以搭配自定義v-model很好用
2. 自定義v-model在組件中定義時，是可以自定義model的 prop和event對象的值
3. 調用的時候，直接使用 this.$emit(‘自定義的event值’,‘需要返回給父組件的值’)