vue 封装双向绑定组件

可以通过自定义组件的 props 和 events 实现封装双向绑定组件。以下是一个简单的示例：

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  }
}
</script>

在上面的代码中，我们定义了一个包含输入框和标签的自定义组件。该组件接受两个 props：value 和 label。value 表示输入框的值，label 表示标签的文本。在组件内部，我们使用 v-bind 指令将 value 绑定到输入框的 value 属性上，使用 v-on 指令监听输入框的 input 事件，并使用 $emit 方法触发一个名为 input 的自定义事件，并将输入框的值作为参数传递给父组件。

在父组件中，我们可以像使用普通的 input 元素一样使用我们自定义的双向绑定组件：

<template>
  <div>
    <my-input v-model="name" label="姓名"></my-input>
    <p>您输入的姓名是：{{ name }}</p>
  </div>
</template>

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

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

在上面的代码中，我们使用 v-model 指令将父组件的 name 数据属性与 MyInput 组件的 value 属性进行双向绑定。这样，当用户在 MyInput 组件中输入姓名时，父组件的 name 数据属性也会随之更新，从而实现了双向绑定。