[TOC] >[success] # prop、event、slot 技巧 ~~~ 1.一個再復雜的組件，都是由三部分組成的：prop、event、slot，所以不管是 閱讀他人的組件還是自己編寫組件一定針對這三個地方去下手 ~~~ >[info] ## prop ~~~ 1.'prop' 定義了這個組件可配置的屬性 2.'props' 最好用對象的寫法，這樣可以針對每個屬性設置類型、默認值或自 定義校驗屬性的值（簡單說使用它的校驗版本） 3.一些常用的'html' 標簽屬性例如'id','value' 可以直接在父組件調用子組件的 時候直接寫在組件上，這些定義的值會覆蓋原來組件定義的相同值，并且值 作用在組件最外層dom元素上。 4.'class' 和 'style' 是個例外會直接將在父組件調用時候,將子組件存在的屬性'class' 和'style' c進行合并(指的也是最外層) 5.像'disabled' 這類有意義的屬性，可以在組件調用時候直接使用，'props ' 中只用定義相同名字即可直接使用 6.如果不想讓我們定義一些屬性不在附加到子組件最外層標簽，想只使用'props'定義好的屬性， 這里需要設置屬性 'inheritAttrs: false' ，產生效果除了class 和 style 依舊會像四條一樣合并，但是 不會在出現第 2 ，5 覆蓋和沒有在props定義的屬性直接使用的問題（默認'inheritAttrs: true' ） ~~~ >[danger] ##### 自定義一個button組件 -- 案例說明 ~~~ 1.當沒用指定'inheritAttrs' 的時候默認為true,如果你沒在子組件通過prop 定義將會產生以下效果 'class' 和 'style'，會自動和子組件的最外層dom元素上的class 和style 合并，其他元素標簽會以 父組件為準并且替代子組件最外層dom上的相同元素 2.關閉 inheritAttrs （設置是false） 除class和style 外其他都不好被禁止掉沒有上面說的效果 ~~~ ~~~ <template> <button id="6666" :disabled="disabled" :class="'i-button-size' + size" value="445" >ss</button> </template> <script> // props size 自定義的驗證規則判斷 function oneOf (value, validList) { for (let i = 0; i < validList.length; i++) { if (value === validList[i]) { return true; } } return false; } export default { //inheritAttrs: false, props: { size: { validator (value) { return oneOf(value, ['small', 'large', 'default']); }, default: 'default' }, disabled: { type: Boolean, default: false }, } } </script> ~~~ * 使用 ~~~ <template> <div> <my-button id="btn1" class="btn-submit" value="41"></my-button> </div> </template> <script> import myButton from '_c/my-button' export default { name: "testlison", components:{ myButton } } </script> <style scoped lang="less"></style> ~~~ * 沒有關閉 inheritAttrs （默認是true）  * 關閉 inheritAttrs （設置是false）  * class 的說明  >[info] ## slot ~~~ 1.插槽看之前的插槽篇即可 ~~~ >[info] ## event ~~~ 1.通過 $emit，就可以觸發自定義的事件在父組件事件，將子組件的內容通過 綁定的$emit傳遞，比較常見的就是子傳父 2.第二中就是使用'native',這個是給組件綁定事件時候加的修飾符 2.1. 組件綁定事件時候，必須加上native ，不然不會生效（監聽根元素的原生事件，使用?`.native`?修飾符） 2.2. 等同于在子組件中，子組件內部處理然后向外發送click事件：`$emit("click".fn)` ~~~ >[danger] ##### 案例 ~~~ 1.下面案例中'myButton' 是一個組件,這個案例是直接給在父組件條用的子組件綁定了一個事件， 這個事件沒有用'$emit' 子傳父，而是直接綁定一個父組件的方法 2.使用的場合，當我們想直接觸發某些組件的時候，比如這種'button'組件觸發無非是要進行某 中確認，我們根不就不需要為此在做一次子傳父的處理，只要直接讓組件和我們的父組件中的 方法關聯即可，直接使用'native' 修飾 ~~~ ~~~ <template> <div> <!--<my-button @on-click="parentClick"></my-button>--> <my-button @click.native="parentClick"></my-button> </div> </template> <script> import myButton from '_c/my-button' export default { name: "testlison", components:{ myButton }, methods:{ parentClick(val){ console.log(val) } } } </script> <style scoped lang="less"> </style> ~~~