vue v-show的显示和隐藏不生效了没反应了

提供一个思路:开发时会遇到父组件调用子组件,通过在父组件的条件变量来控制子组件的隐藏与显示,因为有时候为了性能方面的考虑,不使用v-if而是时候v-show,但会遇到v-show失效的情况,这个时候可以通过给子组件传递这个条件变量,让子组件来控制自己的显示与隐藏。举个例子:

父组件:

<script>
import siteTree from './index/siteTree '
              <template>
                <span v-show="isShow===true">站点:</span>
                <site-tree v-model="siteName" :is-enable="isShow===true" :data="siteList" />
              </template>

site-tree为子组件名称,在这里isShow作为条件变量,传递给子组件,父组件实现间接控制子组件隐藏和显示,

子组件:

<template>
  <div>
    <el-input
      v-show="isShow"
      v-model="selectData"
    >
      <i slot="suffix" class="el-input__icon" @click="Click(item)" />
    </el-input>
  </div>
</template>
<script>
export default {
  props: {
    isShow: {
      default: true,
      type: Boolean
    }
  },

子组件通过传递过来的isShow控制自身隐藏与显示


v-show和v-if区别:
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值