component
1 <!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>包裹动态组件，此时失活的组件会被缓存，当它被在此渲染的时候能够保留之前用户的数据
Keep-alive
- Props：
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max- 数字。最多可以缓存多少组件实例。
- 用法：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在
<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。
1 <!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>
原文地址：https://www.cnblogs.com/boye-1990/p/10588970.html
时间： 2024-10-29 04:23:50