<template>
  <!-- 子組件 -->
  <TestComponent ref="TestComponent"></TestComponent>
</template>

<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
export default {
  components: {
    TestComponent
  },
  mounted () {
    // 調(diào)用子組件方法
    this.$refs.TestComponent.show()
  }
}
</script>

<template>
  <!-- 子組件 -->
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'
export default {
  components: {
    TestComponent
  },
  setup () {
    // 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
    const RefTestComponent = ref(null)
    // 延遲使用，因為還沒有返回跟掛載
    nextTick(() => {
      RefTestComponent.value.show()
    })
    // 返回
    return {
      RefTestComponent
    }
  }
}
</script>

<template>
  <!-- 子組件 -->
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script setup>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'

// 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
const RefTestComponent = ref(null)
// 延遲使用，因為還沒掛載
nextTick(() => {
  RefTestComponent.value.show()
})
</script>