前言
在閱讀本文前，首先需要了解 Vue在父組件中改變子組件內的某個樣式的方法。
在使用前端UI框架（如iVew、element UI）時，有一些組件的樣式我們無法通過正常設置css樣式進行精確修改。
比如：用 style="height:200px" 設置iVew Select組件的高度，無論怎么設置，它的輸入框高度一直為36px，變化的只是組件中包含輸入框的div的高度，那如果想要修改Select組件輸入框的高度，我們應該怎么辦？
方法
很簡單，一共分兩步，以修改iVew Select組件的高度為例：
- 在瀏覽器頁面使用F12鍵，將Select組件中控制輸入框樣式的class挖出來：
在這我已經定位到了Select的輸入框上，在右側顯示出來的class中修改數值，試一下哪個才是控制輸入框高度的class，這邊我已經試出來
.ivu-select-large .ivu-select-single .ivu-select-selection 控制著它的高度。
- 最關鍵的一步： 使用
/deep/深度選擇器對框架的樣式進行覆寫：
/deep/ .ivu-select-large .ivu-select-single .ivu-select-selection {
height: 50px;
}
此時，iVew Select組件輸入框的高度已經被我修改成了50px：
擴展
有時候，框架中的某些元素為了保持風格統一，會使用同一些class。
如上示例中，Select 的input框就是用了同一些class，這樣當class被覆寫時，所有Select的input都會發生改變（上圖可以看出三個Select的高度都變成了50px）。
如果想要單獨修改某一個input框，可以先在vue中聲明一個class作為這個組件的標識，然后再進行 /deep/ 覆寫。
假如我給第一個Select聲明了一個class，name為 select-1，那代碼可以寫成：
/deep/ .select-1 .ivu-select-large .ivu-select-single .ivu-select-selection {
height: 50px;
}
這樣就可以只修改第一個Select了！
