vue.js - 使用 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 从父级访问子级成员被认为是一种边缘情况，尽管将模态切换功能公开为公共方法已被广泛接受。