Vue 組件&組件之間的通訊之 template模板引用與動態組件的使用

時間 2020-05-08

標籤 vue 組件之間通訊 template 模板引用動態使用简体版

原文原文鏈接

template模板引用

在component的template中書寫大量的HTML元素很麻煩。 Vue提供了<template>標籤，能夠在裏邊書寫HTML，而後經過ID指定到組建內的template屬性上；javascript

示例：html

由圖可知自定義組件的count的值是自增的，是獨立的，互不影響。vue

vue代碼：java

<template id="my-template">
        
        <div>
            <h2>{{name}}</h2>
            <button  @click="count++">{{count}}</button>
            <ul>
                
                <li v-for="item in numArray">{{item}}</li>
            </ul>
            
        </div>
    </template>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        
        new Vue({ components:{ "my-component-b":{ template:'#my-template', data(){ return{ name:'歡迎來到perfect*的博客園_01', numArray:[1,2,3,4,5], count:0 } } } } }).$mount('div'); </script>

html:正則表達式

<body>
        <div>
        <my-component-b></my-component-b><!--能夠把my-component-b看作一個對象-->
        <my-component-b></my-component-b><!--能夠把my-component-b看作一個對象-->
        
        </div>
    </body>

動態組件：

在一個元素上掛載多個組件，根據不一樣狀態進行切換的時候，能夠使用動態組件；api

動態組件的使用：數組

須要使用內置組件<component></component>，根據 :is 的值決定顯示哪一個組件，:is的值是要顯示的組件id；緩存

示例：dom

初始效果：ide

初始代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>動態組件</title>
 6     </head>
 7     <body>
 8         <div>
 9         <my-component-a></my-component-a>
10         <my-component-b></my-component-b>
11         <my-component-c></my-component-c>
12         
13         </div>
14     </body>
15     
16     
17     <script type="text/javascript" src="../js/vue.js" ></script>
18     <script>
19         
20         new Vue({ 21             
22             
23             
24             
25  components:{ 26                     "my-component-a":{ 27                         template:'<h1>歡迎來到perfect*的博客園</h1>'
28                         
29  }, 30                     
31                     "my-component-b":{ 32                         template:"<a href='https://www.cnblogs.com/jiguiyan/'> perfect*的博客園 </a>"
33                         
34  }, 35                     "my-component-c":{ 36                         template:"<p>perfect*</p>"
37                         
38  }, 39                     
40                     
41  } 42                 
43             
44             
45         }).$mount('div'); 46     </script>
47 </html>

動態組件

如今的需求：

須要在頁面中只顯示一個，並經過三個button來進進行控制它們的顯示

由效果圖可知，頁面默認顯示my-component-a標籤的內容

vue代碼：

<script>
        
        new Vue({ data:{ selectName:'my-component-a' }, components:{ "my-component-a":{ template:'<h1>歡迎來到perfect*的博客園</h1>' }, "my-component-b":{ template:"<a href='https://www.cnblogs.com/jiguiyan/'> perfect*的博客園 </a>" }, "my-component-c":{ template:"<p>perfect*</p>" }, } }).$mount('div'); </script>

html:

<div>
            <button @click="selectName='my-component-a' ">a</button>
            <button @click="selectName='my-component-b' ">b</button>
            <button @click="selectName='my-component-c' ">c</button>
        <!--<my-component-a></my-component-a>
        <my-component-b></my-component-b>
        <my-component-c></my-component-c>-->
        
        <component :is="selectName"></component>
        
        </div>

代碼注意：

總的代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>動態組件</title>
 6     </head>
 7     <body>
 8         <div>
 9             <button @click="selectName='my-component-a' ">a</button>
10             <button @click="selectName='my-component-b' ">b</button>
11             <button @click="selectName='my-component-c' ">c</button>
12         <!--<my-component-a></my-component-a>
13         <my-component-b></my-component-b>
14         <my-component-c></my-component-c>-->
15         
16         <component :is="selectName"></component>
17         
18         </div>
19     </body>
20     
21     
22     <script type="text/javascript" src="../js/vue.js" ></script>
23     <script>
24         
25         new Vue({ 26  data:{ 27                 selectName:'my-component-a'
28                 
29  }, 30             
31             
32             
33             
34  components:{ 35                     "my-component-a":{ 36                         template:'<h1>歡迎來到perfect*的博客園</h1>'
37                         
38  }, 39                     
40                     "my-component-b":{ 41                         template:"<a href='https://www.cnblogs.com/jiguiyan/'> perfect*的博客園 </a>"
42                         
43  }, 44                     "my-component-c":{ 45                         template:"<p>perfect*</p>"
46                         
47  }, 48                     
49                     
50  } 51                 
52             
53             
54         }).$mount('div'); 55     </script>
56 </html>

動態組件

動態組件結合keep-alive

keep-alive：將非活動的組件緩存起來

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。

exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。

max - 數字。最多能夠緩存多少組件實例。

示例：

初始效果：

由圖能夠看出每一次點擊button調用的值不同，所以引入了keep-alive來進行緩存

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>動態組件</title>
    </head>
    <body>
        <div>
            <button @click="selectName='my-component-a' ">a</button>
            <button @click="selectName='my-component-b' ">b</button>
            <button @click="selectName='my-component-c' ">c</button>
        <!--<my-component-a></my-component-a>
        <my-component-b></my-component-b>
        <my-component-c></my-component-c>-->
        
        
        <component :is="selectName"></component>
        
        </div>
    </body>
    
    
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        
        new Vue({ data:{ selectName:'my-component-a' }, components:{ "my-component-a":{ template:'<h1>A:{{num}}</h1>', data(){ return{ num:Math.ceil(Math.random()*100) } } }, "my-component-b":{ template:"<a href='#'>B:{{num}} </a>", data(){ return{ num:Math.ceil(Math.random()*100) } } }, "my-component-c":{ template:"<p>C:{{num}}</p>", data(){ return{ num:Math.ceil(Math.random()*100) } } }, } }).$mount('div'); </script>
</html>

初始代碼

從圖中能夠看出 a:1 b:84 c: 86的值一直沒發生改變，說明已經被緩存了。

include屬性：

只有a的值被緩存了

<keep-alive include="my-component-a"><!--只有a的值被緩存了-->
            
            
            
            <component :is="selectName"></component>
        </keep-alive>

能夠經過數組進行多個：

效果：

緩存了a和b的值

<keep-alive :include="['my-component-a','my-component-b']"><!--a,b的值被緩存了-->
            
            <component :is="selectName"></component>
          </keep-alive>

同理exclude 屬性測試方法和include同樣，只是exclude表示的是除了那一個不緩存

max屬性：最多能夠緩存多少組件實例

效果圖：

<keep-alive :max='2'><!--最多隻能緩存abc三個值中的其中兩個-->
            <component :is="selectName"></component>
          </keep-alive>

總的代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>動態組件</title>
 6     </head>
 7     <body>
 8         <div>
 9             <button @click="selectName='my-component-a' ">a</button>
10             <button @click="selectName='my-component-b' ">b</button>
11             <button @click="selectName='my-component-c' ">c</button>
12         <!--<my-component-a></my-component-a>
13         <my-component-b></my-component-b>
14         <my-component-c></my-component-c>-->
15         <!--<keep-alive include="my-component-a"><!--只有a的值被緩存了-->
16             
17             <!--<keep-alive :include="['my-component-a','my-component-b']"><!--a,b的值被緩存了-->
18             <keep-alive :max='2'><!--最多隻能緩存abc三個值中的其中兩個-->
19             <component :is="selectName"></component>
20           </keep-alive>
21         
22         
23         
24         </div>
25     </body>
26     
27     
28     <script type="text/javascript" src="../js/vue.js" ></script>
29     <script>
30         
31         new Vue({ 32  data:{ 33                 selectName:'my-component-a'
34                 
35  }, 36             
37             
38             
39             
40  components:{ 41                     "my-component-a":{ 42                         template:'<h1>A:{{num}}</h1>', 43  data(){ 44                             
45                             return{ 46                                 num:Math.ceil(Math.random()*100) 47  } 48  } 49                         
50  }, 51                     
52                     "my-component-b":{ 53                         template:"<a href='#'>B:{{num}} </a>", 54  data(){ 55                             
56                             return{ 57                                 num:Math.ceil(Math.random()*100) 58  } 59  } 60                         
61  }, 62                     "my-component-c":{ 63                         template:"<p>C:{{num}}</p>", 64  data(){ 65                             
66                             return{ 67                                 num:Math.ceil(Math.random()*100) 68  } 69  } 70                         
71  }, 72                     
73                     
74  } 75                 
76             
77             
78         }).$mount('div'); 79     </script>
80 </html>