Vue父组件调用子组件函数实现

下面是详细讲解如何通过Vue父组件调用子组件函数实现：

步骤一：创建子组件

在Vue中，我们通过Vue.component来创建一个组件。创建子组件的代码示例：

Vue.component('child-component', {
  methods: {
    childFunc() {
      console.log('子组件函数执行')
    }
  }
})

在以上示例中，我们创建了一个名称为child-component的子组件，并在其中定义了一个函数childFunc，该函数在被调用时会在控制台输出一句话。

步骤二：在父组件中使用子组件

在Vue中，我们可以在父组件中引用子组件并使用它的函数。这里有两种示例：

示例一：通过ref名调用

首先需要给子组件设置一个ref属性，来获取到该组件的实例。如下所示：

<template>
  <div>
    <child-component ref="childComp"></child-component>
  </div>
</template>
<script>
export default {
  methods: {
    parentFunc() {
      this.$refs.childComp.childFunc()
    }
  }
}
</script>

在以上示例中，我们在父组件中引用了子组件，并给子组件添加了一个ref属性，该属性的值为childComp。父组件中的函数parentFunc可以通过this.$refs.childComp获取到子组件的实例，并调用其中的函数childFunc。这里需要注意，在使用this.$refs获取到子组件实例时，获取到的是Vue组件实例，而不是原生DOM元素。

示例二：通过事件传递调用

除了通过ref获取到子组件实例调用子组件函数外，我们还可以通过事件的方式来调用子组件函数。示例代码如下所示：

<template>
  <div>
    <child-component @child-event="parentFunc"></child-component>
  </div>
</template>
<script>
export default {
  methods: {
    parentFunc() {
      console.log('父组件函数执行')
    }
  }
}
</script>

在以上示例中，我们在子组件中定义了一个child-event事件，并在父组件中监听了该事件，并在事件监听器中调用了parentFunc函数。在子组件中触发该事件时，就会调用父组件中的函数。