一個適用性良好的組件，一種是可配置項(xiàng)很多，另一種就是容易覆寫，從而擴(kuò)展功能

Vue 組件的 API 來自三部分——prop、事件和插槽：

prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件 event 允許從組件內(nèi)觸發(fā)外部環(huán)境的副作用 slot 允許外部環(huán)境將額外的內(nèi)容組合在組件中

prop

組件具有自身狀態(tài)，當(dāng)沒有相關(guān) porps 傳入時，使用自身狀態(tài)完成渲染和交互邏輯；當(dāng)該組件被調(diào)用時，如果有相關(guān) props 傳入，那么將會交出控制權(quán)，由父組件控制其行為

僅一個值傳入組件

如果該組件設(shè)計(jì)上支持雙向綁定，可使用v-model將該參數(shù)傳入組件，減少記憶成本（畢竟 vue 官方的語法糖，不用白不用）

<my-component v-model="foo" />

如果該組件可以獨(dú)立運(yùn)行，不依賴父組件時，還是給這個值起個名字吧

<component-no-sync :childNeed="foo" />

很多值需要傳入組件

我們原先的父組件寫法：

<child-component :prop1="var1" :prop2="var2" :prop="var3" ... />

其實(shí)可以在父組件上直接使用v-bind={子組件props集合}

傳入一個對象

比如當(dāng)一個組件有諸多配置項(xiàng)，且當(dāng)沒有傳入配置項(xiàng)取用組件內(nèi)部默認(rèn)項(xiàng)的時候，為了方便覆寫子組件的內(nèi)部配置項(xiàng)，不妨使用一個對象將配置收集到一起，但是這種做法有兩個缺點(diǎn)，謹(jǐn)慎使用

不能利用 props 驗(yàn)證對象里面每個的值類型 如果你子組件修改了父組件傳入的對象A，父組件的對象A也會發(fā)生修改，所以我一般只有子組件不會修改父組件傳入的值的情況下，我才會傳入對象。父組件把對象傳入子組件，是實(shí)現(xiàn)雙向綁定的hack方式，但不推薦，vue 3.0可能就要對這種方式說拜拜了，為了以后代碼好改，還是不要用這種方式實(shí)現(xiàn)雙向綁定

<child-component v-model="text" :setting="{color:'bule'}" />// 子組件內(nèi)部讀取配置，通過擴(kuò)展運(yùn)算符替換掉默認(rèn)配置const setting ={ ...defaultSetting, ...this.setting}

 還有一種魚和熊掌兼得的方法，可以給子組件包一層，叫中間組件。父組件將配置項(xiàng)作為一個對象傳入中間組件，在中間組件里面對默認(rèn)配置項(xiàng)進(jìn)行初始化和覆寫，然后再以v-bind={生成好的配置}的方式傳入子組件，在子組件里面進(jìn)行驗(yàn)證。

computed 屬性

vue 的 computed 屬性默認(rèn)是只讀的，你可以提供一個 setter。它可以優(yōu)化我寫組件的邏輯，適用于父組件處理的值和子組件處理的值是同一個的情況

<template> <el-select v-model="email">  <el-option   v-for="item in adminUserOptions"   :key="item.email"   :label="item.email"   :value="item.email"  /> </el-select></template>