<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