vue改变子组件props属性值

1.使用v-model和$emit

<!-- 父组件 -->
<template>
  <ChildComponent v-model="propValue" />
</template>

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

const propValue = ref('initial value');
</script>

-

<!-- 子组件 ChildComponent.vue -->
<template>
  <input type="text" :value="propValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

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

const props = defineProps(['modelValue']);
const propValue = props.modelValue;
</script>

2.使用.sync修饰符

<!-- 父组件 -->
<template>
  <ChildCompon