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

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

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

背景介紹

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

組件封裝

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

<el-form ref="form" :model="form" label-width="80px">
? <el-form-item label="活動名稱">
? ? <el-input v-model="form.name"></el-input>
? </el-form-item>
? <el-form-item label="活動區(qū)域">
? ? <el-select v-model="form.region" placeholder="請選擇活動區(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)，每個FormItem的結構都是一樣的，只是其中包含的組件不一樣。這樣，我們就可以通過封裝組件的方式，將代碼簡化，

<el-form ref="form" :model="form" label-width="80px">
? <my-form-item
? ? ? ? ? ? ? ? label="活動名稱"
? ? ? ? ? ? ? ? v-model="form.name"
? ? ? ? ? ? ? ? widget="input"></my-form-item>
? <my-form-item?
? ? ? ? ? ? ? ? label="活動區(qū)域"?
? ? ? ? ? ? ? ? v-model="form.region"?
? ? ? ? ? ? ? ? placeholder="請選擇活動區(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類型，此時，input和select的邏輯耦合在了一起，再需要其他的組件類型時，這個文件結構會很復雜。

Vue動態(tài)組件

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

例子:

<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 屬性是必須的，它的內容為在template中使用的組件標簽。通過 :is 內容的切換就可以動態(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就分解成了兩個組件，每個組件只需要關注自己的邏輯即可。如果需要擴充新的組件，只要按照規(guī)范創(chuàng)建一個新的組件即可。

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

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

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

讓多個組件使用同一個掛載點，并動態(tài)切換，這就是動態(tài)組件

<template>
  <div>
     <div>動態(tài)渲染組件</div>
     <div>
     //component標簽就是掛載點,  :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包裹，就可以提高性能，前提是大項目!相對提升性能。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

element多個table實現(xiàn)同步滾動的示例代碼
本文主要介紹了element多個table實現(xiàn)同步滾動，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue實現(xiàn)鼠標滑動預覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實現(xiàn)鼠標滑動預覽視頻封面組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
Proxy中代理數(shù)據(jù)攔截的方法詳解
這篇文章主要為大家詳細介紹了Proxy中代理數(shù)據(jù)攔截的方法，文中的示例代碼講解詳細，對我們學習或工作具有一定的借鑒價值，需要的可以參考一下
2022-12-12
詳解vue3中如何使用shaka-player
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
解決VUE框架導致綁定事件的阻止冒泡失效問題
下面小編就為大家分享一篇vue監(jiān)聽滾動事件實現(xiàn)某元素吸頂或者固定位置顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3?中?watch?與?watchEffect?區(qū)別及用法小結
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別？watch中需要指明監(jiān)視的屬性，也需要指明監(jiān)視的回調，而watchEffect中不需要指明監(jiān)視的屬性，只需要指明監(jiān)視的回調，回調函數(shù)中用到哪個屬性，就監(jiān)視哪個屬性，本文給大家詳細介紹，需要的朋友參考下
2022-06-06
vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
詳解基于 axios 的 Vue 項目 http 請求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項目 http 請求優(yōu)化,非常具有實用價值，需要的朋友可以參考下
2017-09-09
Vue——解決報錯 Computed property "****" was assigned to but it ha
這篇文章主要介紹了Vue——解決報錯 Computed property "****" was assigned to but it has no setter.的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue中watch監(jiān)聽路由傳來的參數(shù)變化問題
這篇文章主要介紹了vue中watch監(jiān)聽路由傳來的參數(shù)變化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07