vue2自定义组件v-model

vue2自定义组件v-model

一、自定义组件

<template>
  <input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: String,
      required: true
    }
  }
};
</script>

二、使用

<template>
  <my-input v-model="value"></my-input>
</template>

<script>
export default {
  data() {
    return {
      value: '黄婷婷'
    }
  }
};
</script>