具有条件渲染的 Vue 组件功能

Question

我有一个名为<PlanView/>的vue组件，我有条件地渲染这个组件：

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

openPlan() {
    this.show_plan = true;
},

但我希望即使组件未呈现也能调用该功能，您能告诉我该怎么做吗？ 提前致谢。

Answer 1

如果希望组件重新渲染而不显示，可以隐藏组件内部模板的可见性，而不是隐藏整个组件。

将道具传递给PlanView以决定是否渲染模板

<PlanView :showPlan="show_plan"/>

接受PlanView组件内的道具，例如

defineProps({
    showPlan: {
        type: Boolean,
        required: false,
        default: false
    }
})

仅在满足 prop 时渲染PlanView的模板。 所以PlanView的模板看起来像

<template>
    <!-- Div or some wraper element -->
    <div v-if="showPlan"> 
        <!-- Rest of your template here -->
    </div>
</template>

或者

只需在包装器上使用v-show即可加载元素，但当条件为 false 时不会在 UI 中显示

<PlanView v-show="show_plan"/>

Answer 2

您可以简单地使用v-show而不是v-if来提供与@Nitheesh 建议的答案相同的功能。

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

但我不确定这就是你调用功能的意思。