在父组件中触发子函数

【问题标题】：Trigger child function in parent component在父组件中触发子函数
【发布时间】：2021-10-22 23:38:05
【问题描述】：

我有一个组件Base.vue 有一个子组件，它正在由路由器视图显示。在子组件中，我的setup() 中有一个函数，但我希望该函数由Base.vue 中的菜单项触发。如何在 vue 3 中实现这一点？我不能为此使用 vuex，因为该函数使用了很多谷歌地图的东西和参考。

Base.vue router-view Component Base.vue 中的函数

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

这可以通过Vue Composition Api轻松实现

为你的子组件分配一个引用

<child-component  ref="childRef"></child-component>

在你的 setup 函数中声明 ref 为

import { ref } from 'vue'
export default {
  components: { },
  props: {},
  setup(context,props) {
    const childRef = ref(null)
    return {childRef} 
  }
  
}

您现在可以利用childRef 调用子组件中的函数，在设置函数childRef.value.childFunction() 中可以调用子组件中声明的函数

【讨论】：