面试题：Vue中如何通过 scoped 解决组件间样式冲突

Question

请阐述在Vue组件中使用 scoped 属性来解决组件间样式冲突的原理，并且举例说明如何在一个组件中正确使用 scoped 让其样式只作用于该组件。

Answer 1

1. scoped 属性解决样式冲突的原理

当在 <style> 标签上添加 scoped 属性时，Vue 会通过 PostCSS 给该组件的 DOM 元素添加一个独一无二的动态属性，例如 data-v-xxxxxx，同时给该组件 <style> 标签内的所有 CSS 选择器后面自动追加这个属性选择器。这样一来，这些 CSS 样式就只会应用到带有该特定属性的 DOM 元素上，也就是当前组件的元素，从而避免了与其他组件样式产生冲突。

2. 在组件中正确使用 scoped 示例

假设我们有一个名为 HelloWorld.vue 的组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Vue!'
    };
  }
};
</script>

<style scoped>
.hello {
  color: blue;
}
</style>

在上述示例中，.hello 这个类的样式只会作用于 HelloWorld.vue 组件内的 <div> 元素，不会影响到其他组件中相同类名的元素，因为它实际上渲染出来的 CSS 选择器类似于 .hello[data-v-xxxxxx]，而只有 HelloWorld.vue 组件的 DOM 元素带有 data-v-xxxxxx 这个属性。