Vue動(dòng)態(tài)組件component的深度使用說明

更新時(shí)間：2022年04月01日 09:02:09 作者：語霖BABA

這篇文章主要介紹了Vue動(dòng)態(tài)組件component的深度使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

背景介紹

最近在封裝一些基于Vue+ElementUI的組件，將一些實(shí)際項(xiàng)目中常用的，有一定規(guī)律的業(yè)務(wù)進(jìn)行抽象總結(jié)，開發(fā)出相應(yīng)的Vue組件。

組件封裝

首先想到的就是Form組件，在Element UI提供的Form中，我們需要一個(gè)一個(gè)的去添加對用的FormItem

<el-form ref="form" :model="form" label-width="80px">
? <el-form-item label="活動(dòng)名稱">
? ? <el-input v-model="form.name"></el-input>
? </el-form-item>
? <el-form-item label="活動(dòng)區(qū)域">
? ? <el-select v-model="form.region" placeholder="請選擇活動(dòng)區(qū)域">
? ? ? <el-option label="區(qū)域一" value="shanghai"></el-option>
? ? ? <el-option label="區(qū)域二" value="beijing"></el-option>
? ? </el-select>
? </el-form-item>
</el-form>

可以發(fā)現(xiàn)，每個(gè)FormItem的結(jié)構(gòu)都是一樣的，只是其中包含的組件不一樣。這樣，我們就可以通過封裝組件的方式，將代碼簡化，

<el-form ref="form" :model="form" label-width="80px">
? <my-form-item
? ? ? ? ? ? ? ? label="活動(dòng)名稱"
? ? ? ? ? ? ? ? v-model="form.name"
? ? ? ? ? ? ? ? widget="input"></my-form-item>
? <my-form-item?
? ? ? ? ? ? ? ? label="活動(dòng)區(qū)域"?
? ? ? ? ? ? ? ? v-model="form.region"?
? ? ? ? ? ? ? ? placeholder="請選擇活動(dòng)區(qū)域"
? ? ? ? ? ? ? ? widget="select"
? ? ? ? ? ? ? ? :options="options"></my-form-item>
</el-form>

**my-form-item.vue **0.1版如下

? <el-form-item :label="title">
? ? <el-select v-if="widget === 'select'" v-model="form[path]" :clearable="true">
? ? ? <el-option v-for="option in options" :key="option.code" :label="option.name" :value="option.code"></el-option>
? ? </el-select>
? ? <el-input v-else-if="widget === 'input'" v-model="form[path]" :clearable="true"></el-input>
? </el-form-item>

0.1版，直接使用了v-if來處理widget類型，此時(shí)，input和select的邏輯耦合在了一起，再需要其他的組件類型時(shí)，這個(gè)文件結(jié)構(gòu)會(huì)很復(fù)雜。

Vue動(dòng)態(tài)組件

在Vue中，提供了動(dòng)態(tài)組件component，它可以在動(dòng)態(tài)的選擇加載那個(gè)組件。

例子:

<template>
? <div class="home">
? ? <img alt="Vue logo" src="../assets/logo.png" />
? ? <!-- ? ?<HelloWorld msg="Welcome to Your Vue.js App" />-->
?
? ? <a href="#" @click="current = 'hello-world'">Hello World</a>
? ? <a href="#" @click="current = 'hello-world2'">Hello 2</a>
? ? <component :is="current" :msg="current" @clicked="handleClicked"></component>
? </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '../components/HelloWorld.vue';
import HelloWorld2 from '../components/HelloWorld2';
?
export default {
? name: 'Home',
? components: {
? ? HelloWorld,
? ? HelloWorld2
? },
? data() {
? ? return {
? ? ? current: 'hello-world'
? ? };
? },
? methods: {
? ? handleClicked(e) {
? ? ? alert(e);
? ? }
? }
};

在component中 :is 屬性是必須的，它的內(nèi)容為在template中使用的組件標(biāo)簽。通過 :is 內(nèi)容的切換就可以動(dòng)態(tài)的渲染和組件了。

改造組件

my-form-item.vue

? <component
? ? v-if="widgetType"
? ? :is="currentWidget"
? ? v-model="form[path]"
? ? v-bind="$props"
? ? :label="title"
? ? :property="mProperty"
? ></component>

my-input.vue

<template>
? <el-form-item :label="label">
? ? <el-input :value="value" @input="handleInput"></el-input>
? </el-form-item>
</template>

my-select.vue

<template>
? <el-form-item :label="label">
? ? <el-select :value="value" :clearable="true" @input="handleInput">
? ? ? <el-option
? ? ? ? v-for="option in widgetOptions"
? ? ? ? :key="option.code"
? ? ? ? :label="option.name"
? ? ? ? :value="option.code"
? ? ? ></el-option>
? ? </el-select>
? </el-form-item>
</template>

這樣input和select就分解成了兩個(gè)組件，每個(gè)組件只需要關(guān)注自己的邏輯即可。如果需要擴(kuò)充新的組件，只要按照規(guī)范創(chuàng)建一個(gè)新的組件即可。

總結(jié)：動(dòng)態(tài)組件可以將props完成的傳遞給實(shí)際的組件，同樣也可將實(shí)際組件的Emit監(jiān)聽到，這樣參數(shù)傳遞的問題就解決了，使用動(dòng)態(tài)組件就可以像使用實(shí)際一樣，開發(fā)體驗(yàn)上實(shí)現(xiàn)零差別，代碼處理邏輯實(shí)現(xiàn)解耦

Vue動(dòng)態(tài)組件的理解

什么是動(dòng)態(tài)組件

讓多個(gè)組件使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件

<template>
  <div>
     <div>動(dòng)態(tài)渲染組件</div>
     <div>
     //component標(biāo)簽就是掛載點(diǎn),  :is=綁定的組件名字
       <component :is="currentComponent"></component>
     </div>
     <button @click="btn_click()">按鈕</button>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
  name:'About',
  data(){
    return{
      currentIndex:0
    }
  },
  components:{
    Tab0,
    Tab1
  },
  methods:{
    btn_click(){
      if(this.currentIndex==0){
        this.currentIndex=1
      }else{
        this.currentIndex = 0
      }
    }
  },
  computed:{
    currentComponent:function(){
      return `Tab${this.currentIndex}`
    }
  }
}
</script>

每次切換都是生成新的組件，如果用keep-alive包裹，就可以提高性能，前提是大項(xiàng)目!相對提升性能。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: