vue 继承父组建的style

需求

开发中偶尔会把部分样式提出来作为公共样式，但是又不想造成样式污染，所以要保留scoped，目前我的方法有三种

方法1：

提取出来作为一个独立的css文件，然后再需要的地方引入，如:

<style scoped src="../assets/css/xxxxxx.css">
	
</style>
<style scoped>
/* 当前子组件的其他样式 */
</style>

需要主注意的就是不能使用@import url(“…/assets/css/xxxxxx.css”); 的方式引入,否则会变成全局的样式

方法二

使用css的预处理器——不然会很麻烦——直接在父组件写，让后使用深层选择器，比如

<style scoped lang="scss">
.parent /deep/ {
	.cell {
			display:flex;
			align-items: flex-start;
			.value{
				width:16rem;
			}
		}
}
</style>

方法三

使用css变量，通过vue的style去进行传递，比如：

<-- 子组件 -->
<template>
	<div class="box" :style="customStyle">

	</div>
</template>

<script>
export default {
	name: 'custom-div',
	props: {
		customStyle: {
			type: Object,
			default: ()=>{}
		},
	}
};
</script>
<style scoped>
.box{
	height: var(--height);
	width: var(--width);
}
</style>


<-- 父组件 -->
<custom-div  :custom-style="{ '--width': width, '--height': height }"></custom-div>

这三种是我常用的方法，各有优缺点，具体用那种好，遇到就知道