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>