Vue3 使用 v-model 在父子组件中实现双向数据绑定

Vue2中的v-model只是简单的v-model，但在Vue3中，v-model可以绑定到任意 prop，例如下面例子

父组件：

<template>
  <HelloWorld v-model="parentValue" />
  <p>{{ parentValue }}</p>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      parentValue: ''
    };
  }
}
</script>

<style></style>

子组件：

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

<script>
export default {
  props: {
    modelValue: String
  }
}
</script>