vue3 组件双向绑定

在 Vue3 中，可以使用 `v-model` 指令实现组件的双向绑定。具体来说，需要在组件中使用 `emits` 选项声明一个名为 `update:modelValue` 的事件，并在组件内部使用 `$emit` 方法触发该事件。然后在父组件中使用 `v-model` 指令绑定该事件即可实现双向绑定。

例如，假设我们有一个名为 `MyInput` 的组件，它包含一个输入框和一个按钮，点击按钮后会将输入框中的内容通过 `update:modelValue` 事件传递给父组件。那么可以这样定义该组件：

<template>
  <div>
    <input v-model="inputValue">
    <button @click="handleClick">提交</button>
  </div>
</template>

<script>
export default {
  emits: ['update:modelValue'],
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:modelValue', this.inputValue)
    }
  }
}
</script>

然后在父组件中使用 `v-model` 指令绑定该事件即可实现双向绑定：

<template>
 <div>
    <my-input v-model="value"></my-input>
    <p>输入的内容是：{{ value }}</p>
  </div>
</template>

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

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