今天我們來給大家介紹下在Vue開發中我們經常會碰到的一種需求場景，就是在form中我們需要動態的增加組件模塊，效果如下:

這種效果實現其實就是對 v-for 指令的一種使用，組件不是必須的，只是為了將這部門的代碼我們單獨的拎出來，便于查看，好了，話不多說，我們來看下具體怎么來實現。

案例效果的實現

1.創建組件

首先我們創建一個單獨的組件，同時在 template 中定義我們的表單元素，此處使用的是 element UI 來實現效果。

2.import組件

我們需要在父組件中引入創建的組件，并通過 v-for 來實現動態處理的效果，關鍵代碼如下

使用組件

在 data 中定義 edus 數組.

3.實現添加功能

要實現動態添加組件的功能，我們需要通過點擊添加的按鈕來增加數組 edus 中的元素，如下

let addEduView = function(){ this.edus.push({})}

如此即可實現動態添加的功能。

4.實現移除功能

實現移除動態添加的組件，我們需要在組件中調用父組件中的方法。如下

父組件中定義移除的方法

let deleteEducation = function(index){ if (index !== 0) {  this.edus.splice(index, 1) }}

子組件中回調

5.提交數據

當我們要提交表單數據的時候，怎么將動態添加的組件中的數據一并提交給后臺服務呢，步驟如下:

提交數據的時候將 edus 數組中的數據和表單數據一塊轉換為 JSON 數據提交到后臺。

6.清空組件

最后操作完成需要將動態添加的組件處理掉怎么實現呢？其實效果很簡單，我們只需要清空 edus 數組即可

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。