参考vue scoped，子组件的根节点依然受其父组件的CSS 的影响 - 不忘初心dbsdxq - 博客园 (cnblogs.com)
子组件中通过 .root 给了背景色样式为红色，但是在父组件中由于我们意外给了一个同名 .root 样式，导致我们给子组件额外添加了padding间距（注：字体色理论上由于继承关系也会显示为绿色，我们暂不考虑这个）。
原因，因为父组件的生成的唯一标识 'data-v-a83bd3b0' ，也会给子组件根元素加上这个标识，巧合的是，子组件根元素具有 .root 的选择器，刚好使得 .root[data-v-a83bd3b0] 生效。
即使得该样式生效了
通过以上分析，我们知道，以上问题（样式干扰）由两个条件产生：
①，父组件唯一标识符属性 data-v-id 也会被添加到 子组件根元素上
②，子组件根元素上具有和父组件同名class
解决问题方案（解决原理是将上述任意一个条件使得它不成立，那么问题就不会产生啦）
方案一，避免父组件使用和子组件根元素同名 class（往往很难避免，还需要页面调试查看子组件根元素className）
方案二，给子组件根元素添加一层 div，不添加 class样式（这样的话，父组件生成的data-v-id 便会在该div上，从而使得）推荐
