VUE动态组件component以及

时间 2020-06-10

标签 vue 动态组件 component 以及繁體版

原文原文链接

componenthtml

 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>包裹动态组件，此时失活的组件会被缓存，当它被在此渲染的时候可以保留以前用户的数据vue

Keep-alive正则表达式

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

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

当组件在 <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>