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

發(fā)布時(shí)間：2020-09-26 04:50:06 來源：腳本之家閱讀：153 作者：自由港欄目：web開發(fā)

本文實(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ì)有所幫助。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽