Vue自定義元件並實現v model

為了使元件使用起來更簡單或者簡潔，我們在vue專案中可能需要自定義元件，並且為它實現v-model，以下介紹具體的實現（此處是對element-ui元件el-select的二次封裝）

v-model實現原理： v-model其實是乙個語法糖，繫結了乙個叫value的屬性，然後處理了乙個叫input的事件，事件中把返回值重新賦給了value，如下：

v-model

="val"
/>
:value
="val"
@input
="val = $event.target.value"
/>

當然，value和input的名字已經支援自定義了，在元件中新增model的屬性去設定：

model:

,data()
},methods:
,//...

所以我們的自定義元件需要接收乙個叫value的屬性，並對外暴露乙個叫input的事件去更新繫結值。

>

filterable
placeholder
="請選擇"
v-model
="innervalue"
@change
="changehandler"
:multiple
="multiple"
:collapse-tags
="true"
>
v-for
="item in optionlist"
:key
="item.key"
:label
="item.value"
:value
="item.key"
>
el-option
>
el-select
>
template
>

export
default
,//下拉列表對映集，往往對元件的使用者很有用
innervalue:
null
//v-model實現 step3.子元件中不允許直接修改prop資料}}
,    props:
,      params:
;//預設空物件}}
,      options:},
value:
[string,number]
,//v-model實現，step1.需要繫結value
keyname:
,       valuename:
,      path:
,      refresh:
,      multiple:
,      labelgroup:},
watch:
,value
(val)},
methods:
,//載入下拉選項列表
//載入下拉列表有兩種方式: 通過指定是資料options或者url遠端請求
//options的優先順序高於url的方式
loadoptionlist()
else
;//資料字典typecode設定
}//$postapi為專案中自定義的全域性ajax請求promise函式
this
.$postapi
(this
.url, reqparams)
.then
(resp =>
= resp;
if(result)
else})
;}}setoptionlist
(data)
}this
.optionlist =
;if(list && list.length));
this
.optionmap[key]
= item;}}
this
.$emit
('getoptions'
,this
.optionmap,
this
.optionlist)
;//父元件可獲得相關資料}}
,mounted()
}}<
/script>

1.可傳屬性：

url:string 下拉列表請求位址

params:object/array 請求引數

options:object/array 下拉列表資料

path:string 提取下拉選項陣列的路徑，根路徑為 data 格式： ***.yyy.zzz

keyname:string 字典碼屬性名

valuename:string 字典值屬性名

refresh:boolean 重新整理標識 建議：refresh = !refresh 來重新整理列表

multiple:boolean 是否多選，預設false

labelgroup:boolean 下拉項的值是否展示成 value[key] 的形式 預設false

2.v-model: 可繫結乙個值

3.可用事件：

@change 等價於原元件的change事件

@getoptions(arg1,arg2) 獲取下拉選項的以key為鍵的物件（map）以及陣列

arg1:object 下拉選項的map

arg2:array 下拉選項陣列（值包含key和value屬性）

主要適用於常見的3種場景，以下舉例：

v-model
="user.***"
params
="***_type"
labelgroup
>
vv-select
>
v-model
="user.classify"
url="aaa/listclassifybytype"
:params=""
keyname
="classifyid"
valuename
="classifyname"
path
="classify.list"
>
vv-select
>
v-model
="user.***"
:options
="optionsdata"
keyname
="code"
valuename
="value"
>
vv-select
>

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同，實現元件的復用，但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...