vue3组件v-model 子组件使用父组件的值

在Vue3中，子组件使用父组件的值可以通过v-model实现。具体步骤如下：

1.在父组件中使用v-model绑定一个变量，例如：

<template>
  <div>
    <ChildComponent v-model="value"></ChildComponent>
  </div>
</template>

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

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

2.在子组件中使用props接收父组件传递的值，并使用$emit('update:modelValue', newValue)来更新父组件的值，例如：

<template>
  <div>
    <input :value="modelValue" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

这样，父组件和子组件就可以共享同一个变量了。