vue2-样式冲突-了解scoped的使用和底层实现原理

组件之间的样式冲突问题

默认情况下，写在.vue组件中的样式会全局生效，因此很容易多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：

1. 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的。
2. 每个组件中的样式，都会影响整个index.html页面中的DOM元素。

<template>
    <div class="left-container">
        <h3>Left 组件</h3>
        <my-count :init="9"></my-count>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
h3{
    color: red;
}
</style>