Vue 自定义组件实现 v-model 数据双向绑定

<input v-model="name">

<input :value="name" @input="value = arguments[0]">

<template>
  <input
    type="text"
    v-model="currentValue"
    :placeholder="placeholder"
  />
</template>
<script>
export default {
  props: {
    // 占位符
    placeholder: {
      type: String,
      default: () => ''
    },
    // 当前组件值
    value: {
      type: Object,
      default: () => ''
    }
  },
  computed: {
    // 通过计算属性进行双向绑定
    currentValue: {
      get () {
        return this.value
      },
      set (newVal) {
        // emit 一个 input 事件出去则会修改掉 v-model 的值，vue 自动处理的，只管抛出去新的值即可。
        this.$emit('input', newVal)
      }
    }
  }
}
</script>

<template>
  <div>
    <custom-input v-model="customValue"></custom-input>
    {{ customValue }}
  </div>
</template>
<script>
import CustomInput from './custom-input'
export default {
  components: {
    CustomInput
  },
  data () {
    return {
      customValue: ''
    }
  }
}
</script>