需求
多处使用type组件，但是css不同
- 方法一：传一个变量进去，不加scoped
- 方法二：deep语法
加了scoped，对其它组件不生效，只对本组件元素有效。如果不加scoped呢？不好，会影响其他组件的样式。那么，有什么好的方法吗？答案就是使用deep语法。
deep语法的使用
1. 作用范围
- 里面组件，或里面的里面的里面，都可以
2. deep初使用
- SCSS支持的deep语法，使用
::v-deep操作符
2.1 初步尝试
我们通过::v-deep操作符就使Types组件内的li添加了样式
image
2.2 增加样式
我们传入一个初始值给Types子组件，让其记录选中的li标签显示我们自定义的样式。
image
2.3 精确选中
这只是有两个li的情况，如果里面有很多个li呢？所以我们需要精确选中。
- 加前缀：xxx-type
- ES6语法：定义class对象，如果想在对象的key里面有变量，用 [ ] 包起来
image
image
- 结果显示如下：
image
2.4 进一步封装
封装成一个函数，返回一个对象，还可以接受参数，方便遍历。
liClass(type: string) {
return {
[this.classPrefix + '-item']: this.classPrefix,
selected: this.value === type
};
}
<li :class="liClass('-')" @click="selectType('-')">
