vue3使用$refs

<template>
  <div>
    <!-- 定义一个子组件，并通过 ref 属性给它起个名字，例如 'myChild' -->
    <ChildComponent ref="myChild" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    // 使用 ref 创建对子组件的引用
    const myChild = ref(null);

    // 定义一个方法来调用子组件的方法
    const callChildMethod = () => {
      if (myChild.value) {
        myChild.value.childMethod();
      }
    };

    // 在组件挂载后可以访问 myChild
    onMounted(() => {
      console.log(myChild.value); // 这里可以访问到子组件实例
    });

    return {
      myChild,
      callChildMethod
    };
  }
};
</script>

解释说明

1. 模板部分:

   • 使用 ref="myChild" 给子组件 ChildComponent 起了一个名字 myChild，这样可以在父组件中通过 $refs.myChild 访问到这个子组件实例。
   • 添加了一个按钮，点击按钮会触发 callChildMethod 方法。

2. 脚本部分:

   • 使用 ref 创建了一个响应式的引用 myChild，初始值为 null。
   • 定义了 callChildMethod 方法，当点击按钮时会调用子组件中的 childMethod 方法。
   • 使用 onMounted 钩子确保在组件挂载后可以访问到子组件实例。
   • 返回 myChild 和 callChildMethod 以便在模板中使用。

3. 子组件 (ChildComponent.vue):

   • 假设子组件中有一个方法 childMethod，父组件可以通过 myChild.value.childMethod() 来调用这个方法。

通过这种方式，父组件可以方便地与子组件进行交互。