VUE 動態(tài)組件的應(yīng)用案例分析

更新時間：2019年12月02日 11:57:04 作者：自由港

這篇文章主要介紹了VUE 動態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應(yīng)用場景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了VUE 動態(tài)組件的應(yīng)用。分享給大家供大家參考，具體如下：

業(yè)務(wù)場景

我們在開發(fā)表單的過程中會遇到這樣的問題，我們選擇一個控件進行配置，控件有很多中類型，比如文本框，下來框等，這些配置都不同，因此需要不同的配置組件來實現(xiàn)。

較常規(guī)的方法是使用v-if 來實現(xiàn)，這樣界面看上去比較復(fù)雜，而且需要進行修改主頁面。

解決方案

可以使用動態(tài)組件來實現(xiàn)，為了體現(xiàn)動態(tài)組件的特性，我們簡化實現(xiàn)方式，編寫兩個簡單的組件來測試一下這個功能。

文本組件配置：

<template>
 <div>
  我是單行文本框{{config.type}}
 </div>
</template>
<script>
 export default {
  name:"rx-textbox-config",
  props:{
   config:Object
  }
 }
</script>
<style>
</style>

這個組件我統(tǒng)一配置一個config 的對象屬性，配置一個type 屬性。

多行文本框配置：

<template>
 <div>
  我是多行文本框{{config.name}}
 </div>
</template>
<script>
 export default {
  name:"rx-textarea-config",
  props:{
   config:Object
  }
 }
</script>
<style>
</style>

這里我配置一個 name的屬性。

在調(diào)用界面做寫如下代碼，導(dǎo)入組件

export default {
 name: 'App',
 components: {
  rxTextboxConfig,
  rxTextareaConfig,
 }

使用動態(tài)組件：

<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 只是為了體現(xiàn)這個特性，實際實現(xiàn)不用這種方式。

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue3使用slot插槽的實現(xiàn)
插槽在真實的開發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫的時候,通常都需要通過自定義插槽來實現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實現(xiàn),感興趣的可以了解一下
2023-12-12
在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-01-01
vue-amap安裝和用法步驟
vue-amap是餓了么開源的一套基于?Vue?2.0?和高德地圖的地圖組件。接下來通過本文給大家介紹vue-amap安裝和使用,需要的朋友可以參考下
2021-12-12
Vue.js設(shè)計與實現(xiàn)無限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)無限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
Vue+express+Socket實現(xiàn)聊天功能
這篇文章主要為大家詳細介紹了Vue+express+Socket實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
為什么推薦使用JSX開發(fā)Vue3
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
7個很棒的Vue開發(fā)技巧分享
這篇文章主要為大家整理了7個很棒的Vue開發(fā)技巧，可以幫助大家更好的理解和使用vue框架。文中的示例代碼講解詳細，感興趣的可以了解一下
2023-02-02
Vue樹表格分頁的實現(xiàn)方法詳解
這篇文章主要介紹了Vue樹表格分頁的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-10-10
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
Vue項目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項目三級聯(lián)動的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-08-08