在使用iview框架的時候，經常會看到元件用v-model雙向繫結資料，與傳統步驟父元件通過props傳值子元件，子元件傳送$emit來修改值相比，這種方式避免操作子元件的同時再操作父元件，顯得子元件的封裝效果更好。所以，個人認為，我們自己封裝元件也應該有這樣的思維，父元件通過slot或者props傳值，由子元件完成一些效果，再丟擲必要的事件讓父元件接受，這樣元件的可復用性就很強，有利於多次使用。剛剛提到，iview通過v-model雙向繫結資料，所以首先我們要明白v-model在這個過程中做了什麼。有vue基礎的同學應該知道，v-model本質是乙個語法糖，在v-bind和v-on的整合。表單元素比如input，v-bind繫結乙個值，就把data資料傳給了value，同時再通過v-on監聽input事件，當表單資料改變的時候，也會把值傳給data資料，**如下
// 相當於
允許乙個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下，乙個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。允許乙個自定義元件在使用v-model時定製prop和event一般說來，
v-model用在表單元素上進行資料的雙向繫結，自定義元件通常通過父子元件傳值繫結資料
預設情況下，乙個元件上的v-model會把value用作prop且把input用作event
前邊說了，v-model是v-bind和v-on的語法糖，那麼這裡v-model就完成兩個步驟
舉乙個栗子
比如
// 父元件
// 子元件
vue.components('child',
props:
template: ``
})
iptvalue = value'>前面說了，父子元件傳值通過prop和$emit，第一步父元件把iptvalue通過prop傳給了子元件，但要注意，我這裡的子元件給prop取了乙個別名叫做ipt作為區分,所以子元件的prop物件中的鍵為我取的別名ipt。第二步，當子元件input值改變的時候，子元件監聽了乙個onchange方法，注意我這裡也給$emit中的事件取了乙個別名，只不過這個別名和原來的名字一樣change，input值改變emit提交change事件並把新值傳給父元件，又又又要注意，$emit的荷載都是字串....
然後就跟上面**一樣
父元件執行value => iptvalue = value語句，這樣就完成了父子元件資料的雙向繫結
個人覺得v-model用在自定義元件最大的好處是提高了元件的封裝性，父元件不必要另外寫乙個接受子元件傳送給來的$emit方法
最後是第三句話，但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的其實這很容易理解，因為value字串在input中是有意義的，取別名有利於區分，不太重要啦這一小部分... 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 暫...