使用 vue / composition api 从父级调用子组件方法答案

【问题标题】：Call a child component method from parrent using vue / composition api使用 vue / composition api 从父级调用子组件方法
【发布时间】：2020-05-06 06:24:00
【问题描述】：

我正在尝试使用此组合 API 在 Vue 中构建可重用的模态组件。计划是公开一些方法，例如 toggleModal() 来调用父组件中的某些事件。我已经在setup() 和methods 中编写了我的方法。

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

      const toggleModal = () => {};

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

如果我 console.log() 我的模态组件，我可以看到只有来自 methods 的 toggleModalMethod() 被暴露。

有没有办法公开子方法并从父组件调用它？

【问题讨论】：

根据我的经验，调用子组件的方法并不是一个好主意。对于模态窗口，最好使用您自己的 visible 道具。在 Vue 中，我们只能使用道具向孩子发送数据。另一种方法是将您的模态连接到存储变量。我认为您不需要将子方法暴露给父级，使用道具非常有用。
新api的目的不是让全局可用的东西，为什么不让modal订阅全局可用的数据，而不是尝试访问内部方法呢？（您也可以在商店中做到这一点）
@MaksimTikhonov 我正在尝试重构一个遗留应用程序并将其从 vuex 中移除，因为它可以在没有它的情况下进行管理。在创建 Modal 组件时，我想向它传递一个 visible 道具，但我很好奇我是否可以使用其自包含逻辑创建这个组件，因为我的应用程序不需要全局了解它，也不需要了解它的父组件。为此，我需要一些公开的方法来切换其状态。这是一个马马虎虎的想法吗？
这不是一个坏主意，尽管正如我所写的那样，这似乎不是 api 的用途。
@moshyfawn 有时我使用 service prop 来触发子组件中的某些内容。例如，您可以将trigger prop 声明为数字，并在需要时将Date.now() 值发送给它。在一个孩子中，您将观察 trigger 道具，当它发生变化时，您将 localVisible 设置为 true 3000 毫秒

标签： vue.js vuejs2 vue-composition-api

【解决方案1】：

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

这里是a demo：

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

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

通过 ref 从父级访问子级成员被认为是 an edge case，尽管将模态切换功能公开为公共方法已被广泛接受。

【讨论】：

也在寻找答案，但您的 codepen 显示了与我相同的错误：TypeError: this.$refs.modal.toggleModal is not a function
@BenjaminFourgeaud 这个问题是codesandbox特有的，它还表明属性或方法“isModalOpen”未在实例上定义但在渲染期间引用，而isModalOpen显然是因为它是从setup 返回的。不能说为什么演示现在失败了，因为它在发布时正在工作，可能最后一个版本没有保存。我现在无法更新它，我很确定问题是那里没有安装组合 API 插件，并且该示例在适当的环境中重现时将起作用（插件安装超出了问题的范围）。跨度>