Vue3子组件传值给父组件

在Vue 3中，可以使用props来实现子组件向父组件传值的功能。以下是具体的步骤：

1. 在父组件中定义一个props属性来接收子组件传递的值。例如，在父组件的模板中添加props属性：

<template>
  <div>
    <child-component :childData="dataFromChild"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromChild: ''
    }
  }
}
</script>

在上述代码中，父组件通过`childData` prop接收子组件传递的值。

2. 在子组件中通过`$emit`方法将需要传递的值发送给父组件。例如，在子组件的方法中使用`$emit`方法：

<template>
  <div>
    <button @click="sendDataToParent">传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-data', '这是子组件传递给父组件的数据');
    }
  }
}
</script>

在上述代码中，子组件通过`this.$emit('child-data', value)`来触发一个名为`'child-data'`的自定义事件，并将需要传递的数据作为第二个参数传递给父组件。

3. 在父组件中监听子组件触发的自定义事件，并更新父组件的数据。例如，在父组件的模板中监听子组件传递的数据：

<template>
  <div>
    <child-component @child-data="handleChildData"></child-component>
    <p>从子组件传递的数据：{{ dataFromChild }}</p>
  </div>
</template>

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

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

在上述代码中，父组件通过`@child-data="handleChildData"`监听了子组件触发的名为`'child-data'`的自定义事件，并在`handleChildData`方法中更新了父组件的数据。

通过以上步骤，就可以实现Vue 3中子组件向父组件传值的功能。