Vue3中父组件如何调用子组件方法？速看6步搞定！

2023-02-01 19:10:47

在 Vue 3 中调用子组件方法的指南

简介

Vue 3 中调用子组件方法的方式与 Vue 2 略有不同。本文将一步步指导您完成在 Vue 3 中实现此操作所需的过程。

步骤 1：在子组件中定义要暴露的方法

在子组件中，使用 defineExpose 方法定义要暴露给父组件的方法。例如：

export default {
  setup() {
    const greet = () => {
      console.log('Hello from child component!');
    };

    return {
      greet: defineExpose(greet),
    };
  },
};

步骤 2：在父组件中创建一个引用

在父组件中，使用 ref 函数创建一个响应式引用，并将其绑定到子组件上：

export default {
  setup() {
    const childRef = ref(null);

    return {
      childRef,
    };
  },
};

步骤 3：在模板中使用 `ref` 绑定子组件

在父组件模板中，使用 ref 指令将子组件绑定到前面创建的引用：

<template>
  <Child ref="childRef" />
</template>

步骤 4：使用 `getCurrentInstance` 获取子组件实例

在父组件的 setup 函数中，使用 getCurrentInstance 方法获取子组件的实例：

export default {
  setup() {
    const child = getCurrentInstance().proxy.$refs.childRef;

    return {
      child,
    };
  },
};

步骤 5：调用子组件的方法

现在您已经获取了子组件的实例，就可以调用其方法了：

export default {
  setup() {
    child.greet();

    return {
      child,
    };
  },
};

步骤 6：测试

在子组件中添加代码以测试您是否能够成功调用其方法：

export default {
  setup() {
    const greet = () => {
      console.log('Hello from child component!');
    };

    return {
      greet: defineExpose(greet),
    };
  },
  mounted() {
    this.greet();
  },
};