从父级 Vue 组件触发子级组件内部的函数

在 Vue.js 中，我们可以通过 Props 和 Emit 来实现父级组件向子级组件通信。但是，在一些情况下，我们需要在父级组件中触发子级组件内部的函数，例如需要在父级组件中动态操作子级组件的某些逻辑，这时候我们需要使用 Ref 来解决问题。

1. 子级组件定义 Ref

我们可以在子级组件内部的某个元素上定义 Ref，在父级组件中通过 Ref 来获取这个子级组件，进而操作它的内部函数。

<template>
  <div>
    <p>我是子级组件</p>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello World!')
    }
  }
}
</script>

在子级组件中，我们添加了一个 sayHello 函数。现在我们需要在父级组件中触发这个函数。

2. 父级组件中获取子级组件

我们可以在父级组件的 mounted 生命周期中通过 Ref 获取子级组件，并执行其内部函数。

<template>
  <div>
    <button @click="triggerChildFunction">点击触发子级函数</button>
    <ChildComponent ref="myRef" />
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.myRef) // 这里可以获取到子级组件的实例
  },
  methods: {
    triggerChildFunction() {
      this.$refs.myRef.sayHello() // 这里通过 Ref 执行子级组件的函数
    }
  }
}
</script>

在父级组件中，我们通过 this.$refs.myRef 获取到了子级组件实例，并通过 this.$refs.myRef.sayHello() 执行了子级组件的 sayHello() 函数。

3. 总结

在 Vue.js 中，可以通过定义 Ref 来获取子级组件的实例，并在父级组件中执行子级组件内部的函数。需要注意的是，在获取子级组件实例时，要在 mounted 生命周期中获取。此外，在子级组件中定义 Ref 时，可以在任何元素上定义，不一定要是子级组件本身。

以上是从父级 Vue 触发子级内部函数的方法，希望本文对你有所帮助。