快捷導(dǎo)航

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

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

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

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

業(yè)務(wù)場(chǎng)景

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

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

解決方案

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

文本組件配置：

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

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

多行文本框配置：

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

這里我配置一個(gè) name的屬性。

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

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

使用動(dòng)態(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)這個(gè)特性，實(shí)際實(shí)現(xiàn)不用這種方式。

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

您可能感興趣的文章:

相關(guān)文章

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