vue组件间scoped引发的问题

【所需知识】

1. 指定属性的class生效

   <style>
   	/**以下定义的class只会在带有f1d5ggfg属性的标签上生效**/
   	.test[data-f1d5ggfg] {}
   </style>
   
   <!-- 会生效 -->
   <div class="test" data-f1d5ggfg> </div>
   <!-- 不会生效 -->
   <div class="test"> </div>
   

2. 带有scoped属性的style会生成唯一的属性，并添加在内部所有标签。（类似上方示例中的 [f1d5ggfg] ）

   转义前：

   <div>123</div>
   <style scoped>
       .test {
           color: red
       }
   </style>
   

   ​ 转义后：

   <!-- sdfererfd当前所处html的唯一标识 -->
   <div data-sdfererfd class="test">123</div>
   <style type="text/css">
       .test[data-sdfererfd] {
           color: red
       }
   </style>
   

【正文】

1. 对于组件中有子组件的，父组件scoped生成的style唯一标识会添加到子组件的根元素上

   避免子组件最外层class和父组件中使用的class名称一致。