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

<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 名称

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/16955070.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！