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

一、简介

• 通常在开发的时候，随处使用到 v-model 进行数据双向绑定

  <input v-model="name">
  

  等价于

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

• 这里通过 计算属性 的 get() 、 set() 实现数据的双向绑定

  1、组件内部可以接收并同步父组件传入的 value 值

  2、组件内部可以在该双向绑定值修改时 emit 一个 input 事件

二、JS 实现自定义组件 v-model 双向绑定

• custom-input.vue 通过 计算属性 进行双向绑定

  <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>
  

• Home.vue 使用

  <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>
  

• demo 效果