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

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

父组件：

<script>
import siteTree from './index/siteTree '
1
2

              <template>
                <span v-show="isShow===true">站点：</span>
                <site-tree v-model="siteName" :is-enable="isShow===true" :data="siteList" />
              </template>
1
2
3
4

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>
1
2
3
4
5
6
7
8
9
10

<script>
export default {
  props: {
    isShow: {
      default: true,
      type: Boolean
    }
  },
1
2
3
4
5
6
7
8

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

---

v-show和v-if区别：