关于Vue组件作用域 CSS

单文件组件中，在style标签中，会有scoped属性，从官方的说法是CSS只会影响当前组件元素，这个是什么意思呢？

官方提供的转换后的代码如下：

<style> 
.example[data-v-f3f3eg9] { 
    color: red; 
} 
</style> 

<template> 
    <div class="example" data-v-f3f3eg9>
        hi
    </div> 
</template>

转换后的代码可以看出，[data-v-f3f3eg9]成为了div标签的一个属性，而style样式中，使用了属性选器。因此，只有在属性为 [data-v-f3f3eg9] ，并且class 为 example时，样式才能生效。

另外，通过scoped属性，不会渗透到子组件中，这个是否和[data-v-f3f3eg9]属性有关？实现组件间样式隔离？

<style scoped>
.example {
  color: red;
}
</style>

<script>
import FormView from './FormView.vue'
export default {
  components: { FormView }
}
</script>

<template>
  <div class="example">hi</div>
  <FormView />
</template>

<template>
    <div>
        <title>
            填写表单信息：
        </title>
        <input placeholder="请输入">
        <button class="form__submit">submit</button>
    </div>
</template>

<style scoped>
.form__submit{
    color: blue;
}

</style>

页面显示效果如下：

转换后的代码：

<div class="home">
    <div data-v-469af010="" class="example">hi</div>
    <div data-v-068a258e="" data-v-469af010="">
        <title data-v-068a258e="">
                填写表单信息：
        </title>
        <input data-v-068a258e="" placeholder="请输入">
        <button data-v-068a258e=""
                class="form__submit">submit</button>
    </div>
</div>

<style type="text/css">
.form__submit[data-v-068a258e] {
    color: blue;
}
</style>

<style type="text/css">
.example[data-v-469af010] { 
    color: red; 
} 
</style>

从转换过的代码可以看出，存在data-v-469af010和data-v-068a258e两个标签属性。如果想要修改组件中form__submit,需要属性选择器，需要设置 data-v-068a258e 和 class为form__submit.

从转换过的代码，可以看出直接增加form__submit,转换后属性为data-v-469af010无法子组件样式进行修改。

<style type="text/css">
.form__submit [data-v-469af010]{
    color: blue;
}
</style>

因此，需要引入深度选择器，可以使用 :deep() 这个伪类。添加转换后为[data-v-469af010] .form__submit ,在data-v-469af010属性下，所有class为.form__submit，样式都会改变。

<style type="text/css">
[data-v-469af010] .form__submit {
    color: red; 
}
</style>

另外，由于属性选择器，优先级更高，可以对自组件样式进行修改。