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

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

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

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

業(yè)務場景

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

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

解決方案

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

文本組件配置：

<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的屬性。

在調用界面做寫如下代碼，導入組件

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

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

您可能感興趣的文章:

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