vue3父组件获取子组件所有属性

在Vue 3中，如果想要在父组件中获取子组件的所有公开属性和方法，可以不使用 defineExpose，直接通过 ref 来引用子组件，然后通过这个 ref 访问子组件的实例。

以下是一个简单的例子：

子组件 (ChildComponent.vue):

<template>
  <div>
    <button @click="childMethod">Click me</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    const childMethod = () => {
      console.log('Child method called');
    };
 
    // 公开的属性或方法
    return {
      childMethod
    };
  }
};
</script>

父组件:

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="parentMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const childComponentRef = ref(null);
 
    const parentMethod = () => {
      if (childComponentRef.value) {
        childComponentRef.value.childMethod();
      }
    };
 
    return {
      childComponentRef,
      parentMethod
    };
  }
};
</script>

在这个例子中，父组件通过 ref="childComponentRef "引用了子组件，并且可以通过 childComponentRef.value 访问子组件的实例。当父组件的 parentMethod 被调用时，它会调用通过 ref 获取到的子组件实例的 childMethod。