1.App.vue（樣式層級高）定義樣式就可以覆蓋子組件或者父組件，無論有沒有設置scoped關鍵字
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每個頁面公共css */
.title{
color: #333333 !important;
}
</style>
2.子組件設置scoped
子組件設置scoped會增加私有后綴，為了保證它的唯一性不會父組件導入的css覆蓋掉，但App.vue導入的css會覆蓋掉它（特別注意）
<template>
<view>
<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
點擊hover效果
</view>
<!-- <button type="primary" @click="onSend">傳值給onB組件</button> -->
</view>
</template>
<script>
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.title {
color: #F0AD4E;
}
</style>
3.父組件如何穿透子組件，覆蓋它的樣式->穿透“>>>和/deep/”
index.vue
<template>
<view class="content">
<onA></onA>
</view>
</template>
<script>
import onA from '@/components/onA.vue';
export default {
data() {
return {
}
},
components:{
onA
},
onLoad() {
},
mounted() {
},
methods: {
}
}
</script>
<style>
>>>.title {
font-size: 36rpx;
color: #007AFF;
}
/deep/.title{
font-size: 36rpx;
color: #f00;
}
</style>
onA.vue
<template>
<view>
<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
點擊hover效果
</view>
<!-- <button type="primary" @click="onSend">傳值給onB組件</button> -->
</view>
</template>
<script>
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss">
.title {
color: #F0AD4E;
}
</style>