javascript 带有条件渲染的Vue组件功能

mlnl4t2r  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(142)

我有一个名为<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;
},

但是我希望即使组件没有被渲染,功能也能被调用,你能告诉我怎么做吗?谢谢。

mf98qq94

mf98qq941#

如果您希望重新显示组件并且不显示组件,您可以隐藏组件内模板的可见性,而不是隐藏整个组件。
PlanView传递一个属性以决定是否渲染模板

<PlanView :showPlan="show_plan"/>

接受PlanView组件内部的 prop ,如

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

只有当 prop 满足时才渲染PlanView的模板。

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

只需在 Package 器上使用v-show,这样元素就会被加载,但在条件为false时不会显示在UI中

<PlanView v-show="show_plan"/>
mbskvtky

mbskvtky2#

您可以简单地使用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>

但我不确定这是否是您所指的 * 通过调用功能 *。

相关问题