動態組件適用於在不同組件之間進行動態切換。我使用過2種方法來實現：
（1）可以通過 Vue 的 <component> 元素加一個特殊的 is 特性來實現；
（2）通過v-if來進行條件渲染，同樣能實現。
下面是2種實現方法的代碼：
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 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 [v-cloak]{ /*防止刷新時閃爍 */
14 display: none;
15 }
16 #app{
17 margin:100px 200px;
18 }
19 button{
20 width:80px;
21 height: 50px;
22 line-height: 50px;
23 font-size: 20px;
24 outline: none;
25 border-radius: 1px;
26 }
27 .isActive{
28 background: #ccc;
29 }
30 .tab{
31 width:600px;
32 height: 200px;
33 border:2px solid #ccc;
34 }
35 </style>
36 </head>
37 <body>
38 <div id="app" v-cloak>
39 <h3>方法1：使用v-if來實現組件之間動態切換</h3>
40 <button
41 v-for="tab in tabs"
42 :key="tab"
43 @click="setCurrentTab(tab)"
44 :class="{isActive:currentTab === tab}">
45 {{ tab }}
46 </button>
47 <tab-home v-if="currentTab == 'Home'"></tab-home>
48 <tab-posts v-if="currentTab == 'Posts'"></tab-posts>
49 <tab-article v-if="currentTab == 'Article'"></tab-article>
50
51 <h3 style="margin-top: 50px;">方法二：使用<component is="currentTabComponent"></component>'來實現真正的動態組件切換</h3>
52 <button
53 v-for="tab in tabs"
54 :key="tab"
55 @click="setCurrentTab(tab)"
56 :class="{isActive:currentTab === tab}">
57 {{ tab }}
58 </button>
59 <component :is="currentTabComponent"></component>
60 </div>
61 <script src="../vue.min.js"></script>
62 <script>
63 //定義3個組件----全局註冊組件
64 Vue.component('tab-home',{
65 template:`
66 <div class="tab">
67 Home組件
68 </div>
69 `
70 })
71 Vue.component('tab-posts',{
72 template:`
73 <div class="tab">
74 Posts組件
75 </div>
76 `
77 })
78 Vue.component('tab-article',{
79 template:`
80 <div class="tab">
81 Article組件
82 </div>
83 `
84 })
85 var vm = new Vue({
86 el:'#app',
87 data:{
88 currentTab:'Home',
89 tabs:['Home','Posts','Article']
90 },
91 methods:{
92 setCurrentTab:function(val){ //設置當前選中的選項卡
93 this.currentTab = val;
94 }
95 },
96 computed:{
97 currentTabComponent:function(){
98 return 'tab-' + this.currentTab.toLowerCase(); //設置當前選中選項卡對應的組件
99 }
100 }
101 })
102 </script>
103 </body>
104 </html>
結論：顯然的是，使用Vue保留的元素<component :is="currentTabComponent"></component>更加方便高效。
值得注意的是：在這裏註冊的組件都是全局註冊的，在<component :is="currentTabComponent"></component>中，currentTabComponent表示已全局註冊的組件名稱。但是currentTabComponent可以支持2種情況：
（1）即上述所說的已註冊的組件名稱
（2）一個組件的選項對象
第（2）種情況的使用，如下所示：
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 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 [v-cloak]{
14 display:none;
15 }
16 #app{
17 margin: 100px 100px;
18 }
19 button{
20 width: 120px;
21 height: 50px;
22 font-size: 20px;
23 line-height: 50px;
24 border-radius: 1px;
25 outline: none;
26 cursor: pointer;
27 }
28 .isActive{
29 background: rgb(182, 179, 179);
30 }
31 .tab{
32 width:600px;
33 height: 200px;
34 border:2px solid #ccc;
35 }
36
37 </style>
38 </head>
39 <body>
40 <div id="app" v-cloak>
41 <button
42 v-for="tab in tabs"
43 :key="tab.name"
44 @click="setCurrentTab(tab)"
45 :class="{isActive:currentTab.name === tab.name}">
46 {{tab.name}}
47 </button>
48 <!-- 注意與使用組件名稱的區別 -->
49 <component :is="currentTab.component" class="tab"></component>
50 </div>
51 <script src="../vue.min.js"></script>
52 <script>
53 //定義組件選項對象
54 var tabs = [
55 {
56 name:"Home",
57 component:{
58 template:`<div class="tab">Home組件</div>`
59 }
60 },
61 {
62 name:"Posts",
63 component:{
64 template:`<div class="tab">Posts組件</div>`
65 }
66 },
67 {
68 name:"Article",
69 component:{
70 template:`<div class="tab">Article組件</div>`
71 }
72 }
73 ];
74 var vm = new Vue({
75 el:'#app',
76 data:{
77 tabs:tabs,
78 currentTab:tabs[0]
79 },
80 methods:{
81 setCurrentTab:function(val){
82 this.currentTab = val;
83 }
84 }
85 })
86 </script>
87 </body>
88 </html>
VUE 動態組件的應用案例分析
本文實例講述了VUE 動態組件的應用。分享給大家供大家參考，具體如下：
業務場景
我們在開發表單的過程中會遇到這樣的問題，我們選擇一個控件進行配置，控件有很多中類型，比如文本框，下來框等，這些配置都不同，因此需要不同的配置組件來實現。
較常規的方法是使用v-if 來實現，這樣界面看上去比較複雜，而且需要進行修改主頁面。
解決方案
可以使用動態組件來實現，爲了體現動態組件的特性，我們簡化實現方式，編寫兩個簡單的組件來測試一下這個功能。
文本組件配置：
<template>
<div>
我是單行文本框{{config.type}}
</div>
</template>
<script>
export default {
name:"rx-textbox-config",
props:{
config:Object
}
}
</script>
<style>
</style>
這個組件我統一配置一個config 的對象屬性，配置一個type 屬性。
多行文本框配置：
<template>
<div>
我是多行文本框{{config.name}}
</div>
</template>
<script>
export default {
name:"rx-textarea-config",
props:{
config:Object
}
}
</script>
<style>
</style>
這裏我配置一個 name的屬性。
在調用界面做寫如下代碼，導入組件
export default {
name: 'App',
components: {
rxTextboxConfig,
rxTextareaConfig,
}
使用動態組件：
<component :is="currentConfig" :config="config"></component>
使用代碼切換組件
this.currentConfig=ctlType +"-config";
if(ctlType=="rx-textbox"){
this.config.type="VARCHAR";
}
if(ctlType=="rx-textarea"){
this.config.name="我是富文本框";
}
這裏寫if 只是爲了體現這個特性，實際實現不用這種方式。
希望本文所述對大家vue.js程序設計有所幫助。
若文章對您有幫助，幫忙點個贊！
0贊
1踩
發佈時間 2019-12-02 15:02:03