vue3父组件使用子组件中的值

在 Vue 3 中，父组件可以使用子组件中的值通过使用 props 属性来实现。以下是一个简单的示例：

子组件 Child.vue:

<template>
  <div>
    <p>{{ childValue }}</p>
    <button @click="emitValue">传递值给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childValue: '子组件的值'
    }
  },
  methods: {
    emitValue() {
      this.$emit('child-event', this.childValue);
    }
  }
};
</script>

父组件 Parent.vue:

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>{{ parentValue }}</p>
  </div>
</template>

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

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

在父组件中，我们使用了子组件的标签 `<child-component>`，并通过 `@child-event` 监听子组件触发的事件。当子组件按钮被点击时，会调用 `emitValue` 方法，将子组件的值通过 `this.$emit` 发送给父组件。父组件中的 `handleChildEvent` 方法会接收到这个值，并将其赋给 `parentValue` 数据。最后，在父组件的模板中，我们可以使用 `{{ parentValue }}` 来显示子组件的值。

这样，父组件就可以在需要的地方使用子组件中的值了。