1 课件

2 组件样式冲突问题

3 scoped的底层实现原理

4 scoped属性

<template>
<div class="left-container">
  <h3>Left 组件h3>
  <hr>
  
  
  <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 :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组件”改为粉色