详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

从Vue3开始，推荐使用<script setup>语法，这是Vue3的新语法之一，并且它的使用方式与Vue2非常不同。使用<script setup>，我们可以更轻松地导入我们需要的属性、方法和生命周期函数，并且可以在组件之间更轻松地共享数据和方法。

在Vue3中，如果父组件想要调用子组件的方法，可以使用$refs。在Vue3中，我们需要在<script setup>选项中使用ref来获取子组件的引用。在这个例子中，我们将使用ref来获取子组件的引用，从而在父组件中调用子组件的方法。

以下是使用$refs在Vue3中调用子组件方法的步骤：

1. 首先，在父组件中使用ref获取子组件的引用，如下所示：

<template>
  <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const childComponentRef = ref(null)
</script>

在这里，我们声明了一个ChildComponent，并创建了一个childComponentRef引用。这将根据子组件的名称自动初始化。

1. 接下来，我们需要在子组件中声明相应的方法：

<template>
  <div>
    <button @click="incrementCounter">增加计数器</button>
  </div>  
</template>

<script setup>
  import { ref } from 'vue'
  const counter = ref(0)
  const incrementCounter = () => {
    counter.value += 1;
  }
</script>

在这里，我们声明了一个incrementCounter方法，该方法将递增计数器的值。

1. 最后，在父组件中，可以使用引用来调用子组件的方法：

<template>
  <button @click="$refs.childComponentRef.incrementCounter()">调用子组件方法</button>
  <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const childComponentRef = ref(null)
</script>

在这里，我们在一个按钮组件内使用$refs来调用子组件方法。如果是通过模版引用进行调用的话，调用方式是 this.$refs.childComponentRef.incrementCounter()。

<template>
  <button @click="incrementCounter()">调用子组件方法</button>
  <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const {ref, onMounted} = Vue
const childComponentRef = ref(null)
const incrementCounter = () =>{
  childComponentRef.value.incrementCounter()
}
</script>

在这里，我们通过使用onMounted钩子函数为父组件设置了incrementCounter方法。该函数将在父组件挂载时执行。在incrementCounter方法中，我们可以通过childComponentRef.value来访问子组件引用，并调用其incrementCounter()方法。现在，我们可以在模版中调用父组件的incrementCounter()方法来实现对子组件方法的调用。

这样就完成了父组件调用子组件方法的过程，希望对你有所帮助。