VUE动态组件component以及keep-alive

最新推荐文章于 2023-04-26 10:38:09 发布

冰糖&雪梨

最新推荐文章于 2023-04-26 10:38:09 发布

阅读量436

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/mnbcx123/article/details/106118953

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

component

<!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>动态组件</title>
 8 </head>
 9 <body>
10     <div id="app">
11 　　　　　
12         <button @click='chgComponent("componentOne")'>组件1</button >
13         <button @click='chgComponent("componentTwo")'>组件2</button>
14         <button  @click='chgComponent("componentThree")'>组件3</button>
15         <!--动态组件 ，更具is的值来确定渲染哪个组件 -->
16         <component :is="componentId"></component>
17     </div>
18 <script src="./vue.js"></script>
19 <script>
20 
21     Vue.component('componentOne',{
22         template:  `
23 
24             <div>组件1</div>
25 
26         `
27     })
28     Vue.component('componentTwo',{
29         template:  `
30 
31             <div>组件2</div>
32 
33         `
34     })
35     Vue.component('componentThree',{
36         template:  `
37 
38             <div>组件3</div>
39 
40         `
41     })
42     new Vue({
43         el: '#app',
44         data() {
45             return {
46                 componentId: 'componentOne'
47             }
48         },
49         methods: {
50             chgComponent: function(componentId){
51 
52                 this.componentId = componentId
53             }
54         },
55     })
56 </script>
57 </body>
58 </html>

注意：component动态组渲染组件时，当切换组件后，之前的组件会被销毁，用户之前在该组件的数据也会被清除，所以我们会使用包裹动态组件，此时失活的组件会被缓存，当它被在此渲染的时候能够保留之前用户的数据

Keep-alive

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
用法：

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

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

 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>动态组件</title>
 8 </head>
 9 <body>
10     <div id="app">
11 
12         <button @click='chgComponent("componentOne")'>组件1</button >
13         <button @click='chgComponent("componentTwo")'>组件2</button>
14         <button  @click='chgComponent("componentThree")'>组件3</button>
15 
16         <!--
17             1.include: 表示会缓存所写入的数组
18             2.exclude：表示不缓存所写入的组件
19             3.max：表示最大缓存组件的个数，其值等于当前组件加历史组件个数的和，如果这个数大于max的则缓存最近使用的max个组件。
20          -->
21 
22        <!-- 失活组件会被缓存,注意 include后面的值不能由空格 -->
23         <keep-alive include= 'componentOne,componentTwo'>
24              <!--动态组件 ，更具is的值来确定渲染哪个组件 -->
25                 <component :is="componentId"></component>
26         </keep-alive>
27 
28         <!-- 失活组件会被缓存,注意 exclude后面的值不能由空格 -->
29         <keep-alive exclude= 'componentOne,componentTwo'>
30              <!--动态组件 ，更具is的值来确定渲染哪个组件 -->
31                 <component :is="componentId"></component>
32         </keep-alive>
33 
34         <!-- 失活组件会被缓存,注意 exclude后面的值不能由空格 -->
35         <keep-alive max= '2'>
36              <!--动态组件 ，更具is的值来确定渲染哪个组件 -->
37                 <component :is="componentId"></component>
38         </keep-alive>
39 
40     </div>
41 <script src="./vue.js"></script>
42 <script>
43 
44     Vue.component('componentOne',{
45         template:  `
46 
47             <div>
48             <h3>组件1</h3>
49             <input type="text">
50             </div>
51 
52         `
53     })
54     Vue.component('componentTwo',{
55         template:  `
56 
57             <div>
58             <h3>组件2</h3>
59             <input type="text">
60             </div>
61 
62         `
63     })
64     Vue.component('componentThree',{
65         template:  `
66 
67             <div>
68             <h3>组件3</h3>
69             <input type="text">
70             </div>
71 
72         `
73     })
74     new Vue({
75         el: '#app',
76         data() {
77             return {
78                 componentId: 'componentOne'
79             }
80         },
81         methods: {
82             chgComponent: function(componentId){
83 
84                 this.componentId = componentId
85             }
86         },
87     })
88 </script>
89 </body>
90 </html>

冰糖&雪梨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE动态组件component以及keep-alive

component<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"
复制链接

扫一扫