Vue_(组件通讯)动态组件结合keep-alive

　　keep-alive　　传送门

　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

　　当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

　　主要用于保留组件状态或避免重新渲染

　　include - 字符串或正则表达式。只有名称匹配的组件会被缓存

　　exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

　　Learn

　　　　一、不使用<keep-alive>包裹动态组件

　　　　二、使用<keep-alive>包裹动态组件

　　目录结构

一、不使用<keep-alive>包裹动态组件

　　此时组件A、B、C组件中的数会一直随机0~100且不重复

        <div id="GaryId"><button @click="selectedName = 'my-component-a'"> a </button><button @click="selectedName = 'my-component-b'"> b </button><button @click="selectedName = 'my-component-c'"> c </button><component :is="selectedName"></component></div>

　　　　"my-component-a":{template:"<h1>A :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}},

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Gary</title></head><body><div id="GaryId"><button @click="selectedName = 'my-component-a'"> a </button><button @click="selectedName = 'my-component-b'"> b </button><button @click="selectedName = 'my-component-c'"> c </button><component :is="selectedName"></component></div></body><script type="text/javascript" src="../js/vue.js" ></script><script type="text/javascript">new Vue({data:{selectedName:'my-component-a'},components:{"my-component-a":{template:"<h1>A :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}},"my-component-b":{template:"<h1>B :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}},"my-component-c":{template:"<h1>C :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}}}}).$mount("#GaryId");</script>
</html>

Gary_dynamic_component.html

二、使用<keep-alive>包裹动态组件

　　此时组件A、B、C组件中的数会第一次会随机出现，随后保存到缓存中，第二次再点击的时候它们会读取缓存中的数

        <div id="GaryId"><button @click="selectedName = 'my-component-a'"> a </button><button @click="selectedName = 'my-component-b'"> b </button><button @click="selectedName = 'my-component-c'"> c </button><keep-alive><component :is="selectedName"></component></keep-alive></div>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Gary</title></head><body><div id="GaryId"><button @click="selectedName = 'my-component-a'"> a </button><button @click="selectedName = 'my-component-b'"> b </button><button @click="selectedName = 'my-component-c'"> c </button><keep-alive><component :is="selectedName"></component></keep-alive></div></body><script type="text/javascript" src="../js/vue.js" ></script><script type="text/javascript">new Vue({data:{selectedName:'my-component-a'},components:{"my-component-a":{template:"<h1>A :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}},"my-component-b":{template:"<h1>B :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}},"my-component-c":{template:"<h1>C :{{num}}</h1>",data(){return{num:Math.ceil(Math.random()*100)}}}}}).$mount("#GaryId");</script>
</html>

Gary_dynamic_component.html

　　当只想缓存A组件

            <keep-alive include="my-component-a"><component :is="selectedName"></component></keep-alive>

　　当想缓存A组件和B组件时候

            <keep-alive :include="['my-component-a','my-component-b']"><component :is="selectedName"></component></keep-alive>

　　排除缓存A组件和B组件的时候

            <keep-alive :exclude="['my-component-a','my-component-b']"><component :is="selectedName"></component></keep-alive>

转载于:https://www.cnblogs.com/1138720556Gary/p/10468290.html

Vue_(组件通讯)动态组件结合keep-alive相关推荐

【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
草图大师里创建动态组件_SketchUp动态组件教程（二）切换隐藏实例教程
按组件属性对话框内默认的顺序,依次完成所有群组模型的命名,如图2-4所示. 所有开关插座英文对应表如下:(也可用拼音字母代替,最好不用中文命名) 1. 一联开关 1Gang Switch 2. 二联开 ...
Vue组件之动态组件
动态组件:不同组件之间进行动态切换,通过 Vue 的元素加一个特殊的 is attribute 实现 1. 基础使用 component 的 is 属性值是组件名,就可以调用该组件 <comp ...
vue延迟渲染组件_Vue 动态组件渲染问题分析
fire 读在最前面: 1.本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程 2.本文知识点涉及vue构造器以及选项策略合并. 渲染逻辑问题描述: Child继承自App,主程序通过 ...
【VUE3】保姆级基础讲解（二）计算属性，vue组件，vue-cli脚手架，组件通讯，插槽slot
目录计算属性computed 侦听器watch 对象监听组件注册全局组件注册局部组件 Vue-CLI脚手架安装和使用 .browserslistrc main.js jsconfig.jso ...
前端:你可能不知道的动态组件玩法
突破自我文章转载自: https://juejin.cn/post/6992483283187531789 作者: 羽飞关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术 ...
[译] 关于 Angular 动态组件你需要知道的
原文链接:Here is what you need to know about dynamic components in Angular 本文主要解释如何在 Angular 中动态创建组件(注:在 ...
五分钟带你摸透 Vue组件及组件通讯
一.组件化开发组件 (Component) 是 Vue.js 强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...

Vue_(组件通讯)动态组件结合keep-alive

Vue_(组件通讯)动态组件结合keep-alive相关推荐

最新文章

热门文章