父组件调用子组件方法 不生效

### Vue 父组件调用子组件方法不生效的原因分析

当父组件尝试调用子组件的方法时遇到问题，通常是因为在 `created` 生命周期钩子中执行此操作时，子组件尚未完全渲染完毕。这会导致 `$refs` 获取不到已经初始化好的子组件实例[^4]。

### 解决方案一：延迟加载与条件渲染组合使用

通过引入布尔变量控制子组件的显示状态，并配合 `v-if` 指令实现按需渲染。这样可以在确保子组件已准备好之后再进行方法调用：

<template>
  <!-- 使用 v-if 控制项目节点是否可见 -->
  <projectNode v-if="nodeVisible" ref="pNode"></projectNode>
</template>

<script>
export default {
  data() {
    return {
      nodeVisible: false,
    };
  },
  methods: {
    checkNode(index, row) {
      this.nodeVisible = true;
      
      // 延迟一小段时间以等待子组件完成挂载
      setTimeout(() => {
        this.$refs.pNode.getNodeData(index, row);
      }, 0);
    }
  }
}
</script>

这种方法利用了 JavaScript 的事件循环机制，在当前同步任务结束后立即执行回调函数中的逻辑，从而保证了子组件已经被正确创建并可被引用。

### 解决方案二：监听子组件生命周期事件

另一种方式是在子组件内部触发自定义事件通知父组件其已完成初始化工作。这种方式更加解耦合，适用于更复杂的场景下父子间通信需求。

#### 子组件部分

// 在 mounted 阶段发出 ready 信号
mounted() {
  this.$emit('ready');
},

#### 父组件部分

<!-- 绑定 ready 事件处理程序 -->
<childComponent @ready="onChildReady"></childComponent>

methods: {
  onChildReady() {
    console.log('子组件准备好了！');
    
    // 此处可以安全地调用子组件的方法
    this.$refs.childMethod();
  }
}

这种模式允许父组件仅在其确认子组件确实处于可用状态下才采取行动，提高了系统的稳定性和可靠性。