Vue组件间的样式冲突污染问题详解

<template>
  <div>
    <p >left组件</p>
    <MyCount :num="4"></MyCount>
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<style>
p{color:red}
</style>

<template>
  <div>
    <!-- 给单个页面添加固定的自定义data-v-001属性，如此就能解决冲突问题
    一个页面最好用同一个，防止混乱
    -->
    <!-- <p data-v-001>left组件</p> -->
    <p >left组件</p>
    <MyCount :num="4"></MyCount>
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<!-- 只不过上面的方法一个一个添加太过麻烦
直接在style标签上添加scoped也能解决组件样式冲突，
因为他会自动帮我们生成data-v-number
-->
<style scoped>
p{color:red}
</style>

<template>
  <div>
    <p >left组件</p>
    <MyCount :num="4"></MyCount>
   
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<style scoped>
p{color:red}
/* 给count组件加样式，left和right文件都加，但是发现效果是受right的样式影响
，这是因为right没有加scoped，而此时我们想要给left文件加样式呢？
标签前面加个/deep/就行了，加上deep是[data--38a98c97] h5这样显示的，不加是h5[data--38a98c97] 
这样显示的
*/
/* 在父组件中修改子组件样式，可用deep */
 /deep/ h5{
    color:orange;
}
</style>