快捷導(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ā)表單的過(guò)程中會(huì)遇到這樣的問(wèn)題，我們選擇一個(gè)控件進(jìn)行配置，控件有很多中類型，比如文本框，下來(lái)框等，這些配置都不同，因此需要不同的配置組件來(lái)實(shí)現(xiàn)。

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

解決方案

可以使用動(dòng)態(tài)組件來(lái)實(shí)現(xiàn)，為了體現(xiàn)動(dòng)態(tài)組件的特性，我們簡(jiǎn)化實(shí)現(xiàn)方式，編寫兩個(gè)簡(jiǎn)單的組件來(lái)測(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)文章

基于Vue2實(shí)現(xiàn)動(dòng)態(tài)折扣表格
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)動(dòng)態(tài)折扣表格,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
vue中使用unity3D如何實(shí)現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實(shí)現(xiàn)webGL將要呈現(xiàn)的效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue實(shí)例中data使用return包裹的方法
今天小編就為大家分享一篇vue實(shí)例中data使用return包裹的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來(lái)越常見,這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下
2023-12-12
vue element input如何讓瀏覽器不保存密碼
這篇文章主要介紹了vue element input如何讓瀏覽器不保存密碼問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue setInterval 定時(shí)器失效的解決方式
這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
詳解vue事件對(duì)象、冒泡、阻止默認(rèn)行為
本篇文章主要介紹了詳解vue事件對(duì)象、冒泡、阻止默認(rèn)行為，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
2017-03-03
Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載,項(xiàng)目較大路由較多時(shí)，路由拆分是一個(gè)不錯(cuò)的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個(gè)模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理，本文通過(guò)示例給大家詳細(xì)講解，需要的朋友可以參考下
2022-11-11
不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹形控件的案例
這篇文章主要介紹了不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹形控件的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue實(shí)現(xiàn)簽到日歷效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08