vue自定义组件实现v-model

要在Vue中实现自定义组件的双向绑定（v-model），你可以使用`model`选项。下面是一个简单的例子，演示如何创建一个自定义组件并将其包装在v-model中使用：

<!-- 父组件 -->
<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: { CustomInput },
  data() {
    return {
      message: ''
    }
  }
}
</script>

<!-- CustomInput.vue -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>

在上面的例子中，父组件通过`v-model="message"`将`message`作为属性传递给子组件`CustomInput`。子组件接收该属性作为`value`，并在输入事件触发时通过`$emit('input', $event.target.value)`将新的值传递回父组件。

这样，当用户在子组件中输入文本时，父组件的`message`属性会自动更新，实现了双向绑定。

请注意，使用`v-model`时，子组件内部的属性名必须为`value`，而不是其他名字。这是因为`v-model`默认会使用`value`作为属性名来传递值，并使用`input`事件来更新值。如果你想要使用不同的属性名，可以在子组件中使用`model`选项来自定义。

<!-- CustomInput.vue -->
<template>
  <input :value="internalValue" @input="updateValue($event.target.value)">
</template>

<script>
export default {
  model: {
    prop: 'customValue',
    event: 'customInput'
  },
  props: {
    customValue: String
  },
  computed: {
    internalValue: {
      get() {
        return this.customValue;
      },
      set(newValue) {
        this.$emit('customInput', newValue);
      }
    }
  },
  methods: {
    updateValue(value) {
      this.internalValue = value;
    }
  }
}
</script>

通过在子组件中使用`model`选项，你可以自定义属性名和事件名，以实现更灵活的双向绑定。在上面的例子中，父组件可以这样使用：

<custom-input v-model="message"></custom-input>

这会将父组件的`message`属性传递给子组件的`customValue`属性，并使用`customInput`事件来更新值。