vue父组件中无法修改子组件的css样式

有时候我们想要在父组件中修改子组件中的样式，发现无法修改，是因为我们父组件的style标签中添加了scoped属性，当前页面的样式只作用到了当前的组件，无法作用到子组件
父组件：

<template>
	<div class="box">
		<header />
	</div>
</template>
<style scoped>
	.el-card{
		background-color:pink;
	}
</style >

子组件：header.vue

<template>
	<p class="title">子组件中的内容</p>
</template>
<style scoped>
	.box{
		background-color:pink;
	}
	.title{
		font-size:25px;
		color:#aaa;
	}
</style >

第一种方法：我们可以去掉父组件style的scoped属性

<style>
	.box{
		background-color:pink;
	}
	.title{
		font-size:25px;
		color:#aaa;
	}
</style >

如果我们只想让class样式对子组件生效还可以给class加上 /deep/ 深度选择器
第二种方法：