vue3中获取子组件的方法

在Vue 3中，你可以使用`ref`和`provide/inject`来获取子组件。

方法一：使用`ref`
1. 在父组件中，使用`ref`来创建一个引用变量，并将其绑定到子组件的实例上。
2. 在子组件中，通过`props`接收父组件传递的引用变量。

父组件：

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

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null);

    const getChildData = () => {
      if (childRef.value) {
        console.log(childRef.value.getData());
      }
    };

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

子组件：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

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

export default defineComponent({
  props: ['childRef'],
  mounted() {
    this.childRef = this;
  },
  methods: {
    getData() {
      // 返回子组件数据
    },
  },
});
</script>

方法二：使用`provide/inject`
1. 在父组件中，使用`provide`来提供子组件的实例。
2. 在子组件中，使用`inject`来获取父组件提供的实例。

父组件：

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

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

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

    const getChildData = () => {
      if (childData.value) {
        console.log(childData.value.getData());
      }
    };

    provide('childData', childData);

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

子组件：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
import { defineComponent, inject } from 'vue';

export default defineComponent({
  mounted() {
    const childData = inject('childData');
    if (childData) {
      childData.value = this;
    }
  },
  methods: {
    getData() {
      // 返回子组件数据
    },
  },
});
</script>

通过上述两种方法，你可以在Vue 3中获取到子组件的实例，然后调用子组件的方法或访问其数据。