需求
多處使用type組件，但是css不同
- 方法一：傳一個變量進去沪斟，不加scoped
- 方法二：deep語法
加了scoped广辰，對其它組件不生效，只對本組件元素有效币喧。如果不加scoped呢轨域？不好，會影響其他組件的樣式杀餐。那么干发，有什么好的方法嗎？答案就是使用deep語法史翘。
deep語法的使用
1. 作用范圍
- 里面組件枉长，或里面的里面的里面，都可以
2. deep初使用
- SCSS支持的deep語法琼讽，使用
::v-deep操作符
2.1 初步嘗試
我們通過::v-deep操作符就使Types組件內(nèi)的li添加了樣式
image
2.2 增加樣式
我們傳入一個初始值給Types子組件必峰，讓其記錄選中的li標簽顯示我們自定義的樣式。
image
2.3 精確選中
這只是有兩個li的情況钻蹬，如果里面有很多個li呢吼蚁？所以我們需要精確選中。
- 加前綴：xxx-type
- ES6語法：定義class對象，如果想在對象的key里面有變量肝匆，用 [ ] 包起來
image
image
- 結(jié)果顯示如下：
image
2.4 進一步封裝
封裝成一個函數(shù)粒蜈，返回一個對象，還可以接受參數(shù)旗国，方便遍歷枯怖。
liClass(type: string) {
return {
[this.classPrefix + '-item']: this.classPrefix,
selected: this.value === type
};
}
<li :class="liClass('-')" @click="selectType('-')">
