自定义组件v-model记录

在其他一些框架语言中并没有v-model这么强大的指令，这么方便。在react使用value，onchange的方式实现双向绑定明显麻烦很多。所以在学习vue的基础语言语法相对其他来说确实简单了很多了。

在写这篇文章前，因为业务需要自定义组件的封装，就去看了这个关于v-model的自定义组件的实现，我们先看看官方文档的说明。

从官方和技术文章中我们可以知道,v-model是v-bind以及v-on配合使用的语法糖，举个例子

<input v-model="value"/>
  <input v-bind:value="value" v-on:input="value=$event.target.value">           

这两种方式实现是等价的

现在我们已经了解了v-model是什么东西了，我们除了能在表单组件上实现v-model，能不能在自定义组件实现双向绑定呢呢？？

答案是可以的。

vue官方文档的v-model的说明：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。

也就是说 我们在在自定义组件上使用v-model 的时候 也是 v-bind:value , v-on:input="value=$event.target.value"

这是默认的v-model的形式，我们也可以通过在子组件中的 model上自定义他们的value和event，接下来我们看代码。

//子组件
<template>
  <div>
    <input  type="text" v-model="checkData">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ''
    }
  },
  computed: {
    inputData: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('checked', val)
         //这个是computed的get  set不是我们的重点， 简单来说就是 得值和改值时触发的事件
      }
    }
  },
  model: {
    prop: 'value',
    event: 'checked' // 这里是我们通过修改默认的value、 input事件 改成我们要使用 checked
  }
}
</script>
// 父组件
<template>
  <div>
    {{msg}}
    <a-input v-model="msg"></a-input>
  </div>
</template>

<script>
import Input from './Input.vue'
export default {
  data () {
    return {
      msg: '12321'
    }
  },
  methods: {
  },
  components: {
    aInput: Input
  }
}
</script>

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

在上面中我们可以看到v-model在自定义组件的实现。 通过$emit的方式，这样是我们很常见的组件通信、我们通过这样的方式传值。所以在这里我们就修改的值传到父组件去修改了。 我们这里是用computed去实现也是可以的，我们也可以用很多实现的方法，当我们修改的时候，比如watch去触发，核心的还是$emit 将我们想要传的值传给父组件， 还有就是model里的event设置跟$emit对应即可。

这两段代码简单实现了自定义组件的v-model，接下来我们就可以愉快的使用自定义组件的v-model啦

最后还有个.sync修饰符比较类似这个v-model有兴趣的小伙伴可以去看看哦！！！

编者第一次写，如果有不足之处欢迎指正！如果有上面问题也欢迎提问哦