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

Question

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

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

      const toggleModal = () => {};

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

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

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

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>

尽管将模态切换函数公开为公共方法是被广泛接受的场景，但通过 ref 从父级访问子级成员被认为是一种边缘情况。