<!-- 子組件 Child.vue（Vue2） -->
<template>
  <div>子組件內(nèi)容</div>
</template>
<script>
export default {
  name: 'ChildComponent',
  mounted() {
    // 關(guān)鍵：子組件掛載完畢，向父組件發(fā)送事件（事件名建議 kebab-case）
    this.$emit('mounted-complete'); 
  },
  methods: {
    // 父組件要調(diào)用的子組件方法
    childMethod() {
      console.log('子組件方法執(zhí)行（已掛載完成）');
    }
  }
}
</script>

<!-- 父組件 Parent.vue（Vue2） -->
<template>
  <!-- 1. v-if 控制子組件顯示；2. ref 綁定子組件；3. @監(jiān)聽子組件事件 -->
  <ChildComponent
    v-if="isChildShow"
    ref="childRef"
    @mounted-complete="handleChildMounted" <!-- 監(jiān)聽掛載完成事件 -->
  />
  <button @click="showChild">顯示子組件</button>
</template>
<script>
import ChildComponent from './Child.vue';
export default {
  components: { ChildComponent },
  data() {
    return { isChildShow: false };
  },
  methods: {
    // 觸發(fā)子組件顯示
    showChild() {
      this.isChildShow = true;
    },
    // 子組件掛載完成后的回調(diào)（核心）
    handleChildMounted() {
      // 此時子組件已完全掛載，$refs 一定存在，可安全調(diào)用方法
      this.$refs.childRef.childMethod();
      // （可選）訪問子組件屬性
      console.log('子組件屬性：', this.$refs.childRef.childProp);
    }
  }
}
</script>

<!-- 子組件 Child.vue（Vue3 選項式） -->
<script>
export default {
  mounted() {
    this.$emit('mounted-complete'); // 同樣用 $emit 發(fā)事件
  },
  methods: {
    childMethod() { /* ... */ }
  }
}
</script>
<!-- 父組件 Parent.vue（Vue3 選項式） -->
<template>
  <ChildComponent v-if="isChildShow" ref="childRef" @mounted-complete="handleChildMounted" />
</template>
<script>
import ChildComponent from './Child.vue';
export default {
  components: { ChildComponent },
  data() { return { isChildShow: false }; },
  methods: {
    showChild() { this.isChildShow = true; },
    handleChildMounted() { this.$refs.childRef.childMethod(); }
  }
}
</script>

<!-- 子組件 Child.vue（Vue3 setup） -->
<template>
  <div>子組件內(nèi)容</div>
</template>
<script setup>
// 1. 聲明要發(fā)送的事件（TypeScript 可選，增強類型提示）
const emit = defineEmits(['mounted-complete']);
// 2. 模擬子組件掛載完成（mounted 鉤子等價于 setup 中直接執(zhí)行異步邏輯后觸發(fā)）
// 注：setup 執(zhí)行時機是 beforeCreate -> created 之間，需用 onMounted 監(jiān)聽掛載
import { onMounted } from 'vue';
onMounted(() => {
  // 掛載完成后發(fā)送事件
  emit('mounted-complete'); 
});
// 子組件方法（需用 defineExpose 暴露給父組件）
const childMethod = () => {
  console.log('Vue3 子組件方法執(zhí)行（已掛載）');
};
// 關(guān)鍵：setup 中定義的方法/屬性，需顯式暴露才能被父組件 $refs 訪問
defineExpose({ childMethod });
</script>

<!-- 父組件 Parent.vue（Vue3 setup） -->
<template>
  <ChildComponent
    v-if="isChildShow"
    ref="childRef" <!-- 用 ref 綁定子組件實例 -->
    @mounted-complete="handleChildMounted" <!-- 監(jiān)聽事件 -->
  />
  <button @click="isChildShow = true">顯示子組件</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './Child.vue';
// 1. 控制子組件顯示的開關(guān)
const isChildShow = ref(false);
// 2. 綁定子組件的 ref（初始為 null）
const childRef = ref(null);
// 3. 子組件掛載完成后的回調(diào)
const handleChildMounted = () => {
  // 此時 childRef.value 是子組件實例，且已暴露 childMethod
  childRef.value.childMethod(); // 安全調(diào)用
};
</script>

<!-- 子組件 Child.vue（Vue3 setup） -->
<script setup>
const emit = defineEmits(['mounted-complete']);
import { onMounted } from 'vue';
// 子組件方法（依賴接口返回數(shù)據(jù)）
const childMethod = (data) => {
  console.log('子組件方法執(zhí)行，數(shù)據(jù)：', data);
};
onMounted(async () => {
  // 模擬異步接口請求（實際開發(fā)中是 axios/fetch）
  const res = await fetch('/api/child-data');
  const data = await res.json();
  // 異步邏輯完成后，再發(fā)送“掛載+初始化完成”事件（可攜帶數(shù)據(jù)）
  emit('mounted-complete', data); 
});
defineExpose({ childMethod });
</script>
<!-- 父組件 Parent.vue（Vue3 setup） -->
<script setup>
// ... 其他代碼不變
const handleChildMounted = (data) => {
  // 接收子組件傳遞的異步數(shù)據(jù)，再調(diào)用方法
  childRef.value.childMethod(data);
};
</script>

// 父組件中添加標志位
const isChildMounted = ref(false);
const handleChildMounted = () => {
  if (!isChildMounted.value) {
    childRef.value.childMethod();
    isChildMounted.value = true; // 執(zhí)行一次后標記
  }
};

// Vue2：this.$refs.childRef?.childMethod();（需開啟 ES6+ 可選鏈語法）
// Vue3：childRef.value?.childMethod();（天然支持）