使用Vue/Composition API从父组件调用子组件方法

Question

我正在尝试使用Vue的组合API构建可重用的模态框组件。计划是公开一些方法，如toggleModal()，以在父组件中的某个事件上调用。

我已经在setup()和methods中编写了我的方法。

export default {
  setup() {
      const isModalOpen = ref(false);

      const toggleModal = () => {};

      return {
          toggleModal,
      };
  },
  methods: {
      toggleModalMethod() {},
  },
};

如果我使用console.log()输出我的模态框组件，我只能看到来自methods中的toggleModalMethod()被暴露出来。

有没有一种方法可以暴露子方法并在父组件中调用它？

- moshyfawn

---

根据我的经验，调用子组件的方法并不是一个很好的主意。对于模态窗口，最好使用自己的 visible 属性。在 Vue 中，我们只能通过 props 将数据发送到子组件。另一种方法是将你的模态窗口连接到 store 变量。我认为你不需要将子组件的方法暴露给父组件，使用 props 是非常有用的。 - Maksim Tikhonov

新的 API 的目的不就是要有全局可用的东西吗？为什么不让模态订阅全局可用数据，而是尝试访问内部方法呢？（你也可以使用存储来完成这个操作） - Michael

@MaksimTikhonov 我正在尝试重构一个遗留应用程序并将其移出vuex，因为它可以在没有它的情况下进行管理。创建Modal组件时，我考虑传递一个“visible”属性，但我很好奇是否可以创建具有自包含逻辑的此组件，因为我的应用程序不需要全局或其父组件知道它。为此，我需要一些公开的方法来切换其状态。这是一个还行的想法吗？ - moshyfawn

这不是一个坏主意，尽管正如我所写的那样，似乎这不是api的初衷。 - Michael

@moshyfawn 有时我使用服务属性来触发子组件中的某些操作。例如，您可以将 trigger 属性声明为数字，并在需要时将 Date.now() 值发送到它。在子组件中，您将监视 trigger 属性，当它发生变化时，您将设置 localVisible 为 true，持续 3000 毫秒。 - Maksim Tikhonov

Answer 1

预期从setup返回的属性在子组件挂载时将在组件实例上可用。

这里是演示：

<template>
  <div>
    <Modal ref="modal"/>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
...
export default {
  ...
  methods: {
    toggle() {
      this.$refs.modal.toggleModal();
    }
  }
};
</script>

通过引用从父级访问子成员被认为是边缘情况，虽然将模态切换函数公开为公共方法是广泛接受的场景。

- Estus Flask

---

也在寻找答案，但您的 CodePen 显示了与我相同的错误：TypeError: this.$refs.modal.toggleModal 不是一个函数。 - Benjamin Fourgeaud

@BenjaminFourgeaud 这个问题是特定于codesandbox的，它还显示*在渲染期间引用了实例上未定义的属性或方法"isModalOpen"，而isModalOpen显然是已经从setup返回的。现在无法更新演示，因为我很确定问题是该组合API插件没有安装，当在适当的环境中复制示例时，它将正常工作（插件安装不在问题的范围内）。 - Estus Flask