封裝通用組件

最近因項目需求，對ElementUI中表格、對話框、菜單等作了二次封裝，爲了較少代碼的書寫量等。

通用組件具有高性能、低耦合的特性。

一、數據從父組件傳入

爲了解耦，子組件自己不能生成數據；即便生成了數據，也只能組件內使用，不能傳遞出去。

父組件對子組件傳參，使用props，例如：

 props: {

            slides: {

                type: Array,

                default: []

            },

            autoplay: {

                type: Boolean,

                default: true

            },

            height: {

                type: String,

                default: "400px"

            },

            arrow: {

                type: String,

                default: "hover"

            }

   }

二、在父組件處理事件

在通用組件中，一般須要處理各類事件，通用組件只做爲一箇中轉，事件的處理方法應當儘可能放在父組件中。例如：

在子組件中的方法：

handleSelectionChange(val) {

        const selectionArr = [];

        val.forEach(function (el) {

                selectionArr.push(el);

         });

         this.$emit('commitSelection', selectionArr);

          /*向父組件傳遞的數據：commitSelection  被選中的數據 */

   },

在父組件中處理：

  <my-table ref='table' @commitSelection='commitSelection'></my-table>

這樣下降了耦合，也保證了通用組件的數據不被污染。不過，不是全部的事件都放在父組件中處理的。例如組件內部的一些交互行爲，或者處理組件內部數據的傳遞，這就不須要在父組件中處理。

三、留一個slot