解决父组件无法修改子组件样式问题

父组件无法修改子组件样式原因：

1. 组件的style标签加了scoped属性，所以再父组件的style中修改子组件的样式是无法应用到子组件上的。
2. 但是，子组件的根节点元素，即以下代码的div.box_container
   子组件 Box.vue

 <template>
 	<div class="box_container">
 		<span class="title">我是Box</span>
 		<span class="content">我喜欢打代码</span>
 		...
 	</div>
</template>

这个根节点就会受到设置了scoped属性的父组件的样式影响和子组件本身样式的影响，也仅有这个根节点。
根节点可以被父组件影响是为了便于父组件对该子组件根元素进行布局。

解决办法：
虽然去掉style标签的scoped属性，就可以实现样式覆盖，但是这样会造成组件的样式污染全局，所以不建议直接去掉scoped！

vue-loader新增的办法：
在父组件修改子组件样式时，加上 ‘>>>’ 、’/deep/’ 或者 ::v-deep
有一些情况下，使用 ‘>>>’ 还是失效(官方说 ‘>>>’ 在Vue 2.x无效)，建议直接使用/deep/或者::v-deep！
父组件 Home.vue

// 引入子组件
 <template>
 	<div class="home_container">
 		<div class="info">
 			<Box></Box>
 			...
 		</div>
 	</div>
</template>
<style lang="less" scoped>
.home_container .info  /deep/ .title{
 color:purple;
}
.home_container .info  /deep/ .content{
 color:skyblue;
}
</style>

其实也可以给每个组件的根元素**添加 id **来区分不同的组件，既实现了类似scoped的私有效果，也方便第三方组件样式的修改。