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

• 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，如何获取到子元素，并调用方法

  <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>