HMVue3.5.4【组件间的样式冲突问题】

 

1 课件

 

 

 

 

 

 

2 组件样式冲突问题

 

 

 

 

 

 

 

3 scoped的底层实现原理

 

 

 

4 scoped属性

<template>
<div class="left-container">
  <h3>Left 组件</h3>
  <hr>
  <!-- <MyCount></MyCount> -->
  <!-- <MyCount init="5"></MyCount> -->
  <MyCount :init="5"></MyCount>
</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>

<template>
<div class="right-container">
  <h3>Right 组件</h3>
  <hr>
  <!-- <MyCount></MyCount> -->
  <MyCount :init="9"></MyCount>
</div>
</template>

<script>
export default {}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

 

 

5 /deep/样式穿透

需求：期望在不直接修改组件count的样式的情况下，通过修改组件left的样式将count组件中的标题“Count组件”改为粉色