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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。