Vue-scoped解析、使用深度选择器

前言

我们都知道Vue中,加上scoped的作用只是对于当前的组件有用（样式）

<style scoped>
</style>

案例解析scoped原理

Home.vue

<template>
  <div class="home">
    <h1>hello</h1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>
<style scoped>
h1{
  color: red;
}
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped lang="less">
</style>

结果如下

这样的过程，就是对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxx的自定义属性

我们会发现Vue是通过属性选择器，给需要添加的元素添加上样式
我们根据上面的结果，很容易会发现。父级组件，也会渲染子组件的中的根组件，我们不妨可以试一下
更改子组件HelloWorld.vue结构

<template>
    <h1>{{ msg }}</h1>
</template>

结果为

深度选择器

我们有时希望可以父组件的样式可以影响到子组件样式
我们首先应想到
直接去除style标签中的scoped属性
Home.vue

<style>
h1{
  color: red;
}

结果

但是，就变成了不是根据自定义属性来处理元素，而是常规的根据标签名来进行样式处理

其实我们可以用到深度属性选择器

深度属性选择器

原始css

>>>h1{
   color: red;
}

less

/deep/ h1{ 
  color:red;
}

scss

::v-deep h1{
   color:red;
}

以上这三种都可以达到依旧依靠自定义属性选择标签渲染样式的效果