提供一个思路:开发时会遇到父组件调用子组件,通过在父组件的条件变量来控制子组件的隐藏与显示,因为有时候为了性能方面的考虑,不使用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区别:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐