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值’,‘需要返回给父组件的值’)