VUE动态组件component以及<keep-alive>
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>
