Vue中父组件监听子组件挂载完成的操作过程

<!-- 子组件 Child.vue（Vue2） -->
<template>
  <div>子组件内容</div>
</template>
<script>
export default {
  name: 'ChildComponent',
  mounted() {
    // 关键：子组件挂载完毕，向父组件发送事件（事件名建议 kebab-case）
    this.$emit('mounted-complete'); 
  },
  methods: {
    // 父组件要调用的子组件方法
    childMethod() {
      console.log('子组件方法执行（已挂载完成）');
    }
  }
}
</script>

<!-- 父组件 Parent.vue（Vue2） -->
<template>
  <!-- 1. v-if 控制子组件显示；2. ref 绑定子组件；3. @监听子组件事件 -->
  <ChildComponent
    v-if="isChildShow"
    ref="childRef"
    @mounted-complete="handleChildMounted" <!-- 监听挂载完成事件 -->
  />
  <button @click="showChild">显示子组件</button>
</template>
<script>
import ChildComponent from './Child.vue';
export default {
  components: { ChildComponent },
  data() {
    return { isChildShow: false };
  },
  methods: {
    // 触发子组件显示
    showChild() {
      this.isChildShow = true;
    },
    // 子组件挂载完成后的回调（核心）
    handleChildMounted() {
      // 此时子组件已完全挂载，$refs 一定存在，可安全调用方法
      this.$refs.childRef.childMethod();
      // （可选）访问子组件属性
      console.log('子组件属性：', this.$refs.childRef.childProp);
    }
  }
}
</script>

<!-- 子组件 Child.vue（Vue3 选项式） -->
<script>
export default {
  mounted() {
    this.$emit('mounted-complete'); // 同样用 $emit 发事件
  },
  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>子组件内容</div>
</template>
<script setup>
// 1. 声明要发送的事件（TypeScript 可选，增强类型提示）
const emit = defineEmits(['mounted-complete']);
// 2. 模拟子组件挂载完成（mounted 钩子等价于 setup 中直接执行异步逻辑后触发）
// 注：setup 执行时机是 beforeCreate -> created 之间，需用 onMounted 监听挂载
import { onMounted } from 'vue';
onMounted(() => {
  // 挂载完成后发送事件
  emit('mounted-complete'); 
});
// 子组件方法（需用 defineExpose 暴露给父组件）
const childMethod = () => {
  console.log('Vue3 子组件方法执行（已挂载）');
};
// 关键：setup 中定义的方法/属性，需显式暴露才能被父组件 $refs 访问
defineExpose({ childMethod });
</script>

<!-- 父组件 Parent.vue（Vue3 setup） -->
<template>
  <ChildComponent
    v-if="isChildShow"
    ref="childRef" <!-- 用 ref 绑定子组件实例 -->
    @mounted-complete="handleChildMounted" <!-- 监听事件 -->
  />
  <button @click="isChildShow = true">显示子组件</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './Child.vue';
// 1. 控制子组件显示的开关
const isChildShow = ref(false);
// 2. 绑定子组件的 ref（初始为 null）
const childRef = ref(null);
// 3. 子组件挂载完成后的回调
const handleChildMounted = () => {
  // 此时 childRef.value 是子组件实例，且已暴露 childMethod
  childRef.value.childMethod(); // 安全调用
};
</script>

<!-- 子组件 Child.vue（Vue3 setup） -->
<script setup>
const emit = defineEmits(['mounted-complete']);
import { onMounted } from 'vue';
// 子组件方法（依赖接口返回数据）
const childMethod = (data) => {
  console.log('子组件方法执行，数据：', data);
};
onMounted(async () => {
  // 模拟异步接口请求（实际开发中是 axios/fetch）
  const res = await fetch('/api/child-data');
  const data = await res.json();
  // 异步逻辑完成后，再发送“挂载+初始化完成”事件（可携带数据）
  emit('mounted-complete', data); 
});
defineExpose({ childMethod });
</script>
<!-- 父组件 Parent.vue（Vue3 setup） -->
<script setup>
// ... 其他代码不变
const handleChildMounted = (data) => {
  // 接收子组件传递的异步数据，再调用方法
  childRef.value.childMethod(data);
};
</script>

// 父组件中添加标志位
const isChildMounted = ref(false);
const handleChildMounted = () => {
  if (!isChildMounted.value) {
    childRef.value.childMethod();
    isChildMounted.value = true; // 执行一次后标记
  }
};

// Vue2：this.$refs.childRef?.childMethod();（需开启 ES6+ 可选链语法）
// Vue3：childRef.value?.childMethod();（天然支持）