首页 > 其他分享 >vue2 动态组件19 keep-alive components component exclude include

vue2 动态组件19 keep-alive components component exclude include

时间:2022-12-06 15:58:46浏览次数:49  
标签:19 名称 components 组件 exclude include Left

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <button @click="comName = 'Left'">展示 Left</button>
    <button @click="comName = 'Right'">展示 Right</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 1. component 标签是 vue 内置的,作用:组件的占位符 -->
      <!-- 2. is 属性的值,表示要渲染的组件的名字 -->
      <!-- 3. is 属性的值,应该是组件在 components 节点下的注册名称 -->

      <!-- keep-alive 会把内部的组件进行缓存,而不是销毁组件 -->
      <!-- 在使用 keep-alive 的时候,可以通过 include 指定哪些组件需要被缓存; -->
      <!-- 或者,通过 exclude 属性指定哪些组件不需要被缓存;但是:不要同时使用 include 和 exclude 这两个属性 -->
      <keep-alive exclude="MyRight">
        <component :is="comName"></component>
      </keep-alive>
      <component :is="comName"></component>

    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'  
    }
  },
  components: {
    // 如果在“声明组件”的时候,没有为组件指定 name 名称,则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

动态切换和隐藏组件

keep-alive:

会把内部的组件进行缓存,而不是销毁组件    当组件第一次被创建的时候,既会执行 created 生命周期,也会执行 activated 生命周期    当时,当组件被激活的时候,只会触发 activated 生命周期,不再触发 created。因为组件没有被重新创建  include: 可以通过 include 指定哪些组件需要被缓存 exclude : 通过 exclude 属性指定哪些组件不需要被缓存;但是:不要同时使用 include 和 exclude 这两个属性       注册名称和name名称的区别,在控制台看到的是那么名称,而不是注册名称   1. 组件的 “注册名称” 的主要应用场景是:以标签的形式,把注册好的组件,渲染和使用到页面结构之中    2. 组件声明时候的 “name” 名称的主要应用场景:结合 <keep-alive> 标签实现组件缓存功能;以及在调试工具中看到组件的 name 名称

标签:19,名称,components,组件,exclude,include,Left
From: https://www.cnblogs.com/wencaiguagua/p/16955070.html

相关文章

  • 洛谷 P1957 口算练习题
        实现代码(原创):#include<stdio.h>#include<string.h>#include<stdlib.h>char*itoa(intvalue,char*str,intradix){staticchardig[]=......
  • 2019.10.26日学习总结
     今天纪老师带着我们探讨了,更新软件的意义、薪资对我们而言究竟意味着什么、为什么要树立终身学习的想法。1:首先说一下,更新软件的意义,为什么要更新软件,这件事情对于我们而......
  • 2019.10.27二进制学习总结
    今天上午大家讨论学习了二进制。我总结了二进制的以下几个规律。1:十进制中2的次方数每增加1它相对应的二进制的数位次就增加1位。2:二进制的每一位数都是都是有循环变化的。3......
  • GXT之旅:第五章:高级Components(6)——TabPanel,Status大概介绍
    TabPanelTabPanel继承Container,作为可以容器,可以负责显示和管理TabItem对象集。TabItem对象集可以方法被add或remove。每一个TabItem都有一个id,用来通过findItem方法来......
  • GXT之旅:第五章:高级Components(2)——Grid的高级应用
    Grid的高级应用之前,我们学习的都是Grid的基本功能。事实上,Grids提供了丰富的功能,下面就让我们了解一下。HeaderGroupConfig假设我们想比较欧洲东部在1950和2000年之间的人......
  • GXT之旅:第五章:高级Components(3)——Paging
    PagingPaging是GXT提供的非常有用的功能。顾名思义,就是分页显示数据,而不是一页显示所有的数据。GXT支持远程和本地的分页:远程分页就是真分页,每次server端返回数据都是数据库......
  • 19.中介者模式
    [实验任务一]:虚拟聊天室在“虚拟聊天室”实例中增加一个新的具体聊天室类和一个新的具体会员类,要求如下:新的具体聊天室中发送的图片大小不得超过20M。新的具体聊天室中......
  • 使用DevExpress WPF主题设计器轻松创建Office 2019绿色主题(一)
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专......
  • C++入门(一)----Visual C++ 6.0和Visual Studio 2019 的安装与使用
    VisualC++6.0的安装与使用VisualStudio2019的安装与使用下载链接:​​​https://visualstudio.microsoft.com/zh-hans/free-developer-offers/​​​VisualStudio201......
  • @mixin 与 @include
    @mixin指令允许我们定义一个可以在整个样式表中重复使用的样式。@include指令可以将混入(mixin)引入到文档中。 定义混入@mixinimportant-text{color:red;f......