父组件加scoped有时也会影响子组件

今天在写vue组件时发现当父组件添加了scoped时，在不使用/deep/的情况下也会影响到子组件的样式，具体情况如下。

• 父组件

  <template>
    <div id="app">
      <div class="app_top">
        <h1>Vue-练习</h1> 
        <hr>
      </div>
      <!--子组件Left-->
      <Left></Left>
    </div>
  </template>
  
  <style lang="less" scoped>
      .content_left{
        text-align: center;
      }
  </style>
  

• 子组件Left

  <template>
    <div class="content_left">
      Myleft
    </div>
  </template>
  

  本以为父组件在没有使用/deep/时子组件中的"Myleft"不会居中，但是事实是子组件中的"Myleft"居中显示了。
  

• 原因

  在浏览器调试发现，当父组件添加scoped时不仅会给自己本身的元素添加"data-v-xxx"的自定义属性，同时也会给其子组件的元素加上"data-v-xxx"的自定义属性。

  

  

  ---

  完结！！

  ---