vue3子组件传值给父组件

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

1. 在子组件中定义props属性：

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

<script>
export default {
  methods: {
    sendValue() {
      this.$emit('childValue', '这是子组件传递给父组件的值');
    }
  }
}
</script>

2. 在父组件中接收子组件传递的值：

// 父组件
<template>
  <div>
    <p>子组件传递的值：{{ receivedValue }}</p>
    <ChildComponent @childValue="handleChildValue" />
  </div>
</template>

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

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

这样，当子组件中的按钮被点击时，子组件会通过`this.$emit`方法触发一个名为`childValue`的自定义事件，并把需要传递给父组件的值作为参数传入。父组件中通过监听`childValue`事件，并在事件处理函数中接收到子组件传递的值，并将其赋值给`receivedValue`属性。最终，父组件可以使用`receivedValue`属性来显示子组件传递的值。