美文网首页
[VUE] v-if为何会令它后面的组件销毁

[VUE] v-if为何会令它后面的组件销毁

作者: seasunk | 来源:发表于2020-11-12 14:55 被阅读0次
image.png
    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>
    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>

如上面的红,绿框
当v-if生效后,(绿框在红框后面)排在它后面的permissionCascader组件会先销毁一次,
解决方法就是将permissionCascader组件放在v-if的上面。
即将红绿位置互换,如下

    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>
    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>

原因不详。

相关文章

  • [VUE] v-if为何会令它后面的组件销毁

    如上面的红,绿框当v-if生效后,(绿框在红框后面)排在它后面的permissionCascader组件会先销毁一...

  • Vue中keep-alive的使用

    概念    keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它...

  • 前端经典问题

    VUE 1、v-show和v-if的区别2、为何v-for中要用key3、描述Vue组件生命周期(有父子组件的情况...

  • vue中keep-alive

    官方定义 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们...

  • vue keepalive 返回清空

    vue官网的描述: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会...

  • vue必须掌握的知识点和能力,提升硬实力(简述)

    v-if 和 v-show 的区别 为何v-for要使用key 描述vue组件的生命周期(有父子组件的情况下) V...

  • vue防止内存泄漏的几点写法

    1、beforeDestroy beforeDestroy周期一般是在组件销毁时调用,比如使用v-if进行组件的显...

  • 实践vue

    vue的生命周期完成后,在组件首次渲染完成后,不用v-if控制组件显隐,再次调用组件,组件不会再次传参进行数据更新

  • vue 重置子组件的默认状态

    在项目开发中我们经常会遇到需要重置子组件默认状态的情况,可以用以下方式解决: 原理就是:采用v-if会销毁组件并且...

  • VueRouter的基本使用

    什么是Vue Router?Vue Router和v-if/v-show一样,是用来切换组件的显示的v-if/v-...

网友评论

      本文标题:[VUE] v-if为何会令它后面的组件销毁

      本文链接:https://www.haomeiwen.com/subject/ywkpbktx.html