vue组件封装 -- 双向绑定 v-model的本质

引言

当我们在封装vue组件的时候，经常会想要父组件与子组件有一个双向绑定数据v-model，例如elementUI 的 input

但是，子组件和父组件是不能直接使用 v-model的，那么应该怎么做呢？

一、v-model的本质

所谓 v-model就是一个语法糖，实际上，它是由 v-bind(:)和 @input两个合在一起的一个缩写

也就是说：v-model 可以分解为：

1. v-bind
2. @input

例如 :

<input type="text" v-model="value">

等于：

<input type="text" :value="value" @input="handleInput">

handleInput (e) {
	this.value = e.target.value
}

二、实现父子组件的双向绑定

原理：

1. 分解v-model，变成两个语法
2. 利用父子组件的通信

父组件使用

<dh-input v-model="value"></dh-input>

子组件获取

<template>
  <div class="dh-input">
    <input :value="value"
           @input="handleInput">
  </div>
</template>
<script>
export default {
  name: 'DhInput',
  props: {
    value: null  // 使用v-bind 获取传来的数据
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value) // 使用子传父，发送数据
    }
  }
}
</script>