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

电脑版发表于：2023/7/18 14:40

Vue3 defineProps、defineEmits、defineExpose 的作用，看了这篇在看下文 Vue3 部分会更容易理解。

**在 `vue2` 中 `ref` 被用来获取对应的子元素，然后调用子元素内部的方法。**
```
<template>
  
  <TestComponent ref="TestComponent"></TestComponent>
</template>

<script>
// 导入子组件
import TestComponent from './TestComponent'
export default {
  components: {
    TestComponent
  },
  mounted () {
    // 调用子组件方法
    this.$refs.TestComponent.show()
  }
}
</script>
```

#### 在 `Vue3 setup () {}` 中使用 `ref`，如何获取到子元素，并调用方法：
```
<template>
  
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script>
// 导入子组件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'
export default {
  components: {
    TestComponent
  },
  setup () {
    // 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一样，否者会关联失效）
    const RefTestComponent = ref(null)
    // 延迟使用，因为还没有返回跟挂载
    nextTick(() => {
      RefTestComponent.value.show()
    })
    // 返回
    return {
      RefTestComponent
    }
  }
}
</script>
```

#### 在 `Vue3 <script setup>` 中使用 `ref`，如何获取到子元素，并调用方法

注意：在`<script setup>`中子组件需要使用defineExpose暴露出来需要的方法，才能被父组件调用
```
// 子组件需要使用defineExpose暴露出来需要的方法，才能被父组件调用
defineExpose({ getTrainingSubProgramList })
```


**父组件：**

```
<template>
  
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script setup>
// 导入子组件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'

// 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一样，否者会关联失效）
const RefTestComponent = ref(null)
// 延迟使用，因为还没挂载
nextTick(() => {
  RefTestComponent.value.show()
})
</script>
```




原文链接：https://blog.csdn.net/zz00008888/article/details/126095130

小可爱

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

{{item.title}}

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

{{item.title}}

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