# 封裝自定義組件詳細教程 [TOC] 本篇文章將帶領你編寫行編輯的自定義組件，實現更加高級的功能。 ## 一、準備工作 建議自定義組件都放到`src/components/JVxeCells`目錄下，方便管理。 如果需要分類，可以在該目錄下新建個目錄，例如本次示例新建一個`demo`文件夾  然后再新建一個`.vue`文件，該文件就是自定義組件的實際實現。  如上圖所示，我新建了一個 `JVxeDemoCell.vue` 文件，接下來就需要在這個文件里寫組件的實際功能代碼了。 ## 二、封裝功能 打開組件文件，引入公共混入 **（重要）** ， `import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'`  每個自定義組件都**必須**引入該混入，因為這里面封裝了組件所必要的參數、變量和方法。 ### JVxeCellMixins詳解 #### 混入參數（props） |?參數名????????|?類型???|?解釋?????????????????????????????????| |---------------|--------|--------------------------------------| |?value?????????|?any????|?綁定的值?????????????????????????????| |?row???????????|?object?|?當前行的數據?????????????????????????| |?column????????|?object?|?當前列的配置?????????????????????????| |?params????????|?object?|?組件公共參數?????????????????????????| |?renderOptions?|?object?|?渲染選項?????????????????????????????| |?renderType????|?string?|?渲染類型（?editer、spaner、default）?| #### 混入變量（data） | 變量名 | 類型 | 解釋 | |------------|------|---------------------------------------| | innerValue | any | `value`經過`setValue()`增強（詳見：“自定義組件增強”章節）處理后的值 | #### 混入計算屬性（computed） | 屬性名 | 類型 | 解釋 | |--------------|--------|---------------------------------------------------------------------------------------------------| | caseId | string | JVXETable實例的唯一ID | | type | string | 組件type，對應`JVXETypes`，對應注冊時填寫的`type`，用去區別多個不同的type但用相同的一個組件時判斷 | | originColumn | object | 原始列配置（用戶手寫的配置列，可以在這里獲取自定義參數） | | cellProps | object | 當前組件綁定的props | #### 混入方法（methods） * `trigger(name, event = {}, args = []) ` 觸發事件 * `handleBlurCommon(value) ` 公共處理blur事件 * `handleChangeCommon(value) ` 公共處理change事件 ### 示例：簡單封裝 簡單封裝就是只封裝`可編輯`模式下的組件，在實際使用中，組件是不顯示出來的，只有當點擊單元格的時候才會顯示出組件，好處就是可以極大的提升性能。 所以簡單封裝只需要一個vue組件就可完成。 完整示例：   注冊并查看效果（注冊方法見：三、最終注冊）   ### 示例：高級封裝 ## 三、最終注冊 推薦在`src/components/JVxeCells/install.js`文件內完成注冊，可以做到開箱即用。 注冊只需要引入組件文件、擴展JVXETypes、調用installCell方法即可完成注冊。 示例：  ## 四、使用示例  # 參考示例 簡單封裝：`src/components/jeecg/JVxeTable/components/cells/JVxeCheckboxCell.vue` 高級封裝：`src/components/JVxeCells/JVxeSelectDictSearchCell.js`