vue3子组件传值到父组件

在Vue 3中，你可以通过使用事件来实现子组件向父组件传值。以下是一种常见的方法：

在子组件中，使用$emit方法触发一个自定义事件，并传递需要传递给父组件的值。例如：

<template>
<button @click="sendValueToParent">传值给父组件</button>
</template>

<script>
export default {
methods: {
sendValueToParent() {
this.$emit('custom-event', '传递的值');
}
}
}
</script>
登录后复制

在父组件中，监听子组件触发的事件，并通过事件参数获取传递的值。例如：

<template>
<div>
<p>从子组件接收的值：{{ receivedValue }}</p>
<child-component @custom-event="handleChildEvent"></child-component>
</div>
</template>

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

export default {
components: {
ChildComponent
},
data() {
return {
receivedValue: ''
};
},
methods: {
handleChildEvent(value) {
this.receivedValue = value;
}
}
}
</script>
登录后复制
在上述示例中，子组件中的按钮点击触发了sendValueToParent方法，该方法通过this.$emit触发了一个名为custom-event的自定义事件，并传递了一个值。父组件中通过监听@custom-event事件，并在handleChildEvent方法中接收子组件传递的值，将其保存在receivedValue变量中。父组件的模板中会显示接收到的值。
这样，子组件就可以将值传递给父组件了。