vue组件绑定v-model

在 Vue 中，我们可以使用 `v-model` 指令对组件进行双向数据绑定。实现双向数据绑定需要在组件内部定义一个名为 `value` 的 prop，并在组件内部使用 `input` 事件抛出当前值。具体实现如下：

1. 定义组件

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

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
}
</script>

2. 在父组件中使用

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>当前输入的内容是：{{ message }}</p>
  </div>
</template>

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

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

在以上代码中，我们定义了一个名为 `CustomInput` 的组件，并在其中定义了一个 `value` prop 和一个 `input` 事件。在组件内部，我们使用 `:value` 将 `value` prop 绑定到 `<input>` 的 `value` 属性上，并在 `<input>` 上监听 `input` 事件，当用户输入时，会触发 `input` 事件，并通过 `$emit` 方法将当前输入的值抛出。

在父组件中，我们使用 `v-model` 将 `message` 绑定到 `CustomInput` 组件上，这样就可以实现双向数据绑定。当用户输入时，会触发 `CustomInput` 组件内部的 `input` 事件，然后将当前输入的值传递到父组件中的 `message` 属性上，最后在 `<p>` 中显示当前输入的内容。