思路
- 在父组件中引入子组件时,为子组件起一个class名称;
- 用深度监听器/deep/修改:在父组件的style样式里用
该class名称 /deep/ 子组件内待修改的class名称
的格式
子组件Button.vue
<template>
<div class="button">
<div class="button-out">
<div class="button-in">button</div>
</div>
</div>
</template>
<script>
export default {
name: "Button",
};
</script>
<style lang="less">
.button .button-out {
position: relative;
width: 135px;
height: 51px;
background:
}
.button .button-in {
position: absolute;
top: 50%;
left: 50%;
margin-left: -62.5px;
margin-top: -21px;
width: 125px;
height: 42px;
background: linear-gradient(0deg,
}
</style>
父组件FatherButton.vue
<template>
<div id="fatherButton">
<Button class="c-button"></Button>
</div>
</template>
<script>
import Button from "./Button.vue";
export default {
name: "FatherButton",
components: {
Button,
},
};
</script>
<style scoped>
.c-button /deep/ .button-out {
width: 206px;
height: 72px;
}
</style>