溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
