vue3子组件改变父组件的值

在 Vue 3 中，子组件改变父组件的值有两种常见的方式：通过事件和通过 v-model。

通过事件：
1. 在子组件中，使用 `$emit` 方法触发一个自定义事件，传递需要改变的值作为参数。
2. 在父组件中，通过在子组件上监听该自定义事件，并在事件处理函数中更新父组件的值。

示例代码：

// 子组件
<template>
<button @click="changeValue">点击改变值</button>
</template>

<script>
export default {
methods: {
changeValue() {
this.$emit('update:value', newValue);
}
}
}
</script>

// 父组件
<template>
<div>
<p>{{ value }}</p>
<ChildComponent @update:value="updateValue" />
</div>
</template>

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

export default {
components: {
ChildComponent
},
data() {
return {
value: '初始值'
};
},
methods: {
updateValue(newValue) {
this.value = newValue;
}
}
}
</script>

通过 v-model：
1. 在子组件中，使用 `v-model` 绑定一个值，并在子组件内部改变这个值。
2. 在父组件中，使用 `v-model` 绑定这个值，并在父组件内部获取和更新这个值。

示例代码：

// 子组件
<template>
<input v-model="internalValue" />
</template>

<script>
export default {
model: {
prop: 'value',
event: 'input'
},
props: {
value: {
type: String,
required: true
}
},
data() {
return {
internalValue: this.value
};
},
watch: {
internalValue(newVal) {
this.$emit('input', newVal);
}
}
}
</script>

// 父组件
<template>
<div>
<p>{{ value }}</p>
<ChildComponent v-model="value" />
</div>
</template>

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

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

这样，无论使用哪种方式，子组件改变父组件的值都是通过事件的方式进行通信的。