vue3中子向父组件传值

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

1. 在父组件中定义一个方法，用于接收子组件传递的值。

<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
    <p>接收到的值：{{ receivedValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    };
  },
  methods: {
    handleChildEvent(value) {
      this.receivedValue = value;
    }
  }
};
</script>

2. 在子组件中触发事件，并将需要传递的值作为参数传递给父组件。

<template>
  <div>
    <button @click="sendValue">发送值给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValue() {
      const value = '传递的值';
      this.$emit('childEvent', value);
    }
  }
};
</script>

在上述示例中，子组件通过 `$emit` 方法触发了名为 `childEvent` 的事件，并将需要传递的值作为参数传递给了父组件。父组件则通过 `@childEvent` 监听该事件，并在事件处理方法中接收到传递的值，然后将其赋值给 `receivedValue`，最终在模板中显示出来。

这样，子组件就成功地将值传递给了父组件。