vue3中父组件怎么在script中获取子组件传递过来的数据

在Vue 3中，父组件可以通过使用`ref`或`reactive`来获取子组件传递过来的数据。以下是两种常见的方法：

1. 使用`ref`：

在父组件的`<script>`标签中，可以使用`ref`来创建一个响应式的引用对象。然后，在子组件中，通过`$emit`方法将数据传递给父组件，并且在父组件中将接收到的数据赋值给引用对象。

父组件：

<template>
  <div>
    <child-component @childData="handleChildData"></child-component>
    <p>接收到的子组件数据：{{ childData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const childData = ref('');

    const handleChildData = (data) => {
      childData.value = data;
    };

    return {
      childData,
      handleChildData
    };
  }
};
</script>

子组件：

<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['childData'],
  methods: {
    sendData() {
      const data = '这是子组件传递给父组件的数据';
      this.$emit('childData', data);
    }
  }
};
</script>

2. 使用`reactive`：

在父组件的`<script>`标签中，可以使用`reactive`来创建一个响应式的对象。然后，在子组件中，通过`$emit`方法将数据传递给父组件，并且在父组件中将接收到的数据赋值给该响应式对象的属性。

父组件：

<template>
  <div>
    <child-component @childData="handleChildData"></child-component>
    <p>接收到的子组件数据：{{ childData }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const parentData = reactive({
      childData: ''
    });

    const handleChildData = (data) => {
      parentData.childData = data;
    };

    return {
      childData: parentData.childData,
      handleChildData
    };
  }
};
</script>

子组件：

<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['childData'],
  methods: {
    sendData() {
      const data = '这是子组件传递给父组件的数据';
      this.$emit('childData', data);
    }
  }
};
</script>

无论使用`ref`还是`reactive`，在父组件中都可以访问到子组件传递过来的数据，并且实时更新。