基于vue中的scoped坑点解说

下面详细讲解基于Vue中的scoped样式坑点解说。

什么是scoped样式

在Vue中，我们可以使用scoped样式来局部作用于某个组件，而不会影响全局样式。scoped样式通过在样式文件中添加<style scoped>来声明。

scoped样式的应用

使用scoped样式在Vue组件中可以很好地控制样式，避免样式冲突，具体示例如下：

<template>
  <div class="parent">
    <h1>{{ title }}</h1>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      title: 'Parent Title'
    }
  }
}
</script>

<style scoped>
.parent {
  background-color: #f0f0f0;
  padding: 20px;
}
</style>

在上面的代码中，我们在父组件中使用了一个<child>子组件，而在父组件的<style scoped>样式中，只对父组件中的.parent样式进行了设置，而不会影响子组件，这样使得父子组件之间的样式不会互相影响。

scoped样式的坑点

虽然scoped样式在Vue组件开发中很好用，但我们在使用过程中也要注意到一些拦路虎，这也是本文要重点讲解的部分。

1. 无法修改父组件样式

下面是一个示例：

<template>
  <div class="parent">
    <p class="text">Parent Text</p>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

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

在上面的代码中，我们在父组件的.parent样式中设置了.text样式的颜色为红色，但是在子组件中，我们想要修改.text样式的颜色为蓝色，结果却发现修改无效：

<template>
  <div class="child">
    <p class="text">Child Text</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

<style scoped>
.parent .text {
  color: blue; /* 无效 */
}
</style>

这时候我们就会发现，父组件中的样式无法被子组件覆盖。在这种情况下，我们可以使用/deep/或>>>来穿透到子组件内的样式，例如：

<style scoped>
.parent /deep/ .text { /* 或 .parent >>> .text */
  color: blue;
}
</style>

这样就能够成功修改.text样式了。

2. 动态生成的元素样式失效

下面是一个示例：

<template>
  <div class="parent">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Parent',
  data() {
    return {
      list: ['one', 'two', 'three']
    }
  }
}
</script>

<style scoped>
li {
  color: red;
}
</style>

在上面的代码中，我们渲染了一个<ul>列表，但是在实际运行时，我们却会发现<li>元素的颜色不为红色。这是因为动态生成的DOM元素的样式不会被scoped样式块覆盖。

解决方法是使用基于属性的选择器，例如：

<style scoped>
[parent] li {
  color: red;
}
</style>

这样就能够成功修改生成元素的样式了。

总结

本文从什么是scoped样式，到scoped样式的应用，再到scoped样式的坑点，介绍了Vue中scoped样式的基本知识和注意事项。通过本文的学习，相信大家对Vue中的scoped样式有了更深入的认识。