vue 自定义组件使用 v-model

在Vue中，如果你想在自定义组件中使用`v-model`，你需要在组件内部使用`model`选项来定义组件的值和更新方式。

下面是一个使用`v-model`的自定义组件的示例：

// 在父组件中使用自定义组件
<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Parent component: {{ message }}</p>
  </div>
</template>

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

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

// 在自定义组件中
<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

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

在上面的示例中，父组件通过`v-model`绑定了自定义组件`CustomInput`的`message`属性。在自定义组件内部，我们使用`:value="value"`将父组件传递的值绑定到输入框的值上，然后通过`@input="$emit('input', $event.target.value)"`监听输入框的`input`事件，并通过`$emit`方法将输入框的值传递给父组件。

这样，当在自定义组件中输入内容时，父组件中的`message`属性会同步更新，反之亦然。这就是使用`v-model`来实现双向绑定的方法。