如何在Vue的<PlanView/>组件未渲染时调用其功能？

因为v-if会在条件不满足时完全销毁组件实例，所以没渲染的时候根本拿不到组件实例，自然没法调用内部方法。给你几个可行的方案：

方案一：用v-show替代v-if #

v-show只是通过CSS隐藏元素，组件实例会一直存在。这样不管显示与否，都能通过ref获取组件实例并调用方法：

修改模板：

<div v-show="show_plan" id="mainplan">
  <PlanView ref="planViewRef"/>
</div>
<div class="icon" v-else>
  <font-awesome-icon icon="fa-solid fa-angles-right" @click="openPlan"/>
</div>

脚本示例（以Vue3为例）：

import { ref } from 'vue';

export default {
  setup() {
    const show_plan = ref(false);
    const planViewRef = ref(null);

    // 即使show_plan为false，也能调用组件方法
    const callPlanViewMethod = () => {
      planViewRef.value?.someInternalMethod();
    };

    const openPlan = () => {
      show_plan.value = true;
    };

    return {
      show_plan,
      planViewRef,
      callPlanViewMethod,
      openPlan
    };
  }
};

注意：如果组件初始化开销大，或者隐藏时不想让它占用资源，这个方案可能不适合。

方案二：抽离核心逻辑到独立模块 #

把PlanView里需要调用的功能，单独提取成工具函数或者组合式函数，这样不管组件有没有渲染，都能直接调用这些逻辑：

比如创建usePlanLogic.js：

// 抽离组件内部的核心方法
export const usePlanLogic = () => {
  const someInternalMethod = () => {
    // 原来组件里的逻辑
    console.log('执行PlanView的核心功能');
  };

  return {
    someInternalMethod
  };
};

在PlanView组件里复用：

import { usePlanLogic } from './usePlanLogic';

export default {
  setup() {
    const { someInternalMethod } = usePlanLogic();
    // 组件里使用这个方法
    return { someInternalMethod };
  }
};

在父组件里直接调用：

import { usePlanLogic } from './usePlanLogic';

export default {
  setup() {
    const { someInternalMethod } = usePlanLogic();
    const show_plan = ref(false);

    // 随时调用，不管组件是否渲染
    const callLogic = () => {
      someInternalMethod();
    };

    const openPlan = () => {
      show_plan.value = true;
    };

    return {
      show_plan,
      callLogic,
      openPlan
    };
  }
};

这个方案是最推荐的，因为它遵循了关注点分离的原则，逻辑复用性更强。

方案三：手动创建组件实例（不渲染到DOM） #

如果必须保留组件实例的完整状态，又不想渲染到页面，可以手动创建组件实例并挂载到内存中：

import { createApp } from 'vue';
import PlanView from './PlanView.vue';

// 创建组件实例，不挂载到真实DOM
const planViewInstance = createApp(PlanView).mount(document.createElement('div'));

// 随时调用组件方法
planViewInstance.someInternalMethod();

这种方式比较小众，适合特殊场景，比如需要组件的生命周期钩子或者内部状态，但又不需要显示的情况。

内容的提问来源于stack exchange，提问作者Bilal