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

下面是标题和正文(不同组件)的代码。当您在组件 1 内部时,如何调用组件 2 的 continue 函数并传递参数,使用组合 API 方式...

组件 2:

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

解答

解决这个问题的一种方法是使用事件进行父子通信,结合模板引用,从中可以直接调用子方法。

1. 在ComponentB.vue中,发出一个父级可以监听的事件(例如,名为continue-event)。我们使用按钮单击来触发此示例的事件:

<!-- 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>

2、在父组件中,使用ComponentA.vue上的模板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>

3. 要链接父组件中的两个组件,请使用v-on指令(或@简写)将myCompContinue设置为在步骤 1 中发出的ComponentB.vue'scontinue-event的事件处理程序:

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

演示

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