vue3 js父组件获取子组件数据

在 Vue 3 中，父组件可以通过 `ref` 或者 `v-model` 来获取子组件的数据。

方法一：使用 `ref`

<template>
  <div>
    <ChildComponent :childData="childData" />
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childData = ref('');

    const getChildData = () => {
      console.log(childData.value); // 在控制台打印子组件数据
    };

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

在父组件中使用 `ref` 来创建一个响应式的变量 `childData`，然后在 `getChildData` 方法中使用 `childData.value` 来访问子组件的数据。

方法二：使用 `v-model`

<template>
  <div>
    <ChildComponent v-model="childData" />
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childData: ''
    };
  },
  methods: {
    getChildData() {
      console.log(this.childData); // 在控制台打印子组件数据
    }
  }
};
</script>

在父组件中使用 `v-model` 来实现双向绑定，将子组件的数据绑定到 `childData` 变量上。然后可以在 `getChildData` 方法中直接访问 `this.childData` 来获取子组件的数据。

以上两种方法都可以实现父组件获取子组件的数据，你可以根据自己的需求选择其中一种方式来使用。