当前位置：网站首页>父组件加scoped有时也会影响子组件

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

2022-07-17 05:05:00 【K I S】

父组件加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"的自定义属性。
完结！！