vue3 父子组件双向绑定

父组件 ParentComponent.vue

<!-- ParentComponent.vue -->
<template>
  <div>
    子组件输入的数据
    <p>Parent Value: {{ parentValue }}</p>
    父输入框
    <input v-model="parentValue">
    <CustomInput v-model="parentValue" />
  </div>
</template>

<script setup>
import CustomInput from './CustomInput.vue';
import { ref } from 'vue';

const parentValue = ref('');
</script>

子组件

<!-- CustomInput.vue -->
<template>
  子组件
  <input :value="modelValue" @input="updateValue($event.target.value)" />
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});

const emit = defineEmits();

const updateValue = (newValue) => {
  emit('update:modelValue', newValue);
};
</script>

 

效果