使用组合 API 从另一个组件调用函数

Question

下面是 header 和 body（不同的组件）的代码。当您在组件 1 中时，如何调用组件 2 的继续函数并传递参数，使用组合 API 方式...

组件 2：

export default {
    setup() {
        const continue = (parameter1) => {
            // do stuff here
        }
        
        return {
            continue
        }
    }
}

Answer 1

解决此问题的一种方法是使用事件进行 parent-to-child 通信，结合模板引用，从中可以直接调用子方法。

在 ComponentB.vue 中，发出父级可以收听的事件（例如，命名为 continue-event）。我们使用 button-click 来触发此示例的事件：

<!-- ComponentB.vue -->
<script>
export default {
  emits: ['continue-event'],
}
</script>

<template>
  <h2>Component B</h2>
  <button @click="$emit('continue-event', 'hi')">Trigger continue event</button>
</template>

在父级中，在 ComponentA.vue 上使用 template ref 以在 JavaScript 中获取对它的引用，并创建一个函数（例如，命名为 myCompContinue）以直接调用子组件的continueFn。

<!-- Parent.vue -->
<script>
import { ref } from 'vue'

export default {
  ⋮
  setup() {
    const myComp = ref()
    const myCompContinue = () => myComp.value.continueFn('hello from B')

    return {
      myComp,
      myCompContinue,
    }
  },
}
</script>

<template>
  <ComponentA ref="myComp" />
  ⋮
</template>

到link父级中的两个组件，使用v-on directive（或@shorthand）设置myCompContinue为事件处理程序ComponentB.vue's continue-event，在步骤 1 中发出：

<template>
  ⋮
  <ComponentB @continue-event="myCompContinue" />
</template>

demo

注意： 使用选项 API 编写的组件（如您在问题中使用的那样）默认情况下通过模板引用公开其方法和道具，但是这对于使用 <script setup> 编写的组件而言并非如此。在这种情况下，需要 defineExpose 来公开所需的方法。

使用组合 API 从另一个组件调用函数

Call a function from another component using composition API

vue.js

vuejs3

vue-composition-api