Vue3中CSS用法(scoped、选择器、module、v-bind)

1. scoped作用域

(2). 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响

  A. 子组件的根节点会收父组件的影响，非根节点不是影响。

        如果子组件child1中最外层div的类名也叫box1，则会被父组件的样式替代

        如果子组件child1中非外层div的类名也叫box1，则不受父组件影响

  B. 子组件被添加两个 data-xxx属性 <div class="childbox1" data-v-c74b84a5="" data-v-beda6b21="">我是子组件</div>

<template>
	<h2>测试作用域scoped</h2>
	<br />
	<div class="box1">我是box1</div>
	<br />
	<child1></child1>
</template>

<script setup>
import child1 from "@/components/child1.vue";
</script>

<style scoped>
.box1 {
	width: 200px;
	height: 200px;
	background-color: pink;
	color: black;
}
</style>

2. 选择器

<style>
/* 全局样式 */
</style>

<style scoped>
/* 局部样式 */
</style>

父页面代码：

 <template>
	<h2>测试选择器</h2>
	<br />
	<div class="box1">我是box1</div>
	<br />
	<child1> <div class="box3">我是插槽中的默认内容</div></child1>
</template>

<script setup>
import child1 from "@/components/child1.vue";
</script>

<style scoped>
.box1 {
	width: 200px;
	height: 200px;
	background-color: pink;
	color: black;
}

/* 深度选择器 */
/* :deep(.box2) {
	font-weight: bold;
	font-size: 20px;
	color: red;
} */

/* 全局选择器 */
:global(.box2) {
	font-weight: bold;
	font-size: 20px;
	color: red;
}
</style>

<style>
/* 全局样式 */
/* .box2 {
	font-weight: bold;
	font-size: 20px;
	color: red;
} */
</style>

子组件代码：

 <template>
	<div class="childbox1">
		我是子组件
		<div class="box1">我是子组件的内容1</div>
		<div class="box2">我是子组件的内容2</div>
		<slot> </slot>
	</div>
</template>

<script setup></script>

<style scoped>
.childbox1 {
	width: 200px;
	height: 300px;
	background-color: bisque;
	color: green;
}
/* 插槽选择器 */
:slotted(.box3) {
	font-weight: bold;
	font-size: 28px;
	color: pink;
}
</style>

3. css module

4. v-bind

<script setup>
import { reactive, ref } from "vue";
let myTheme = reactive({
	bgColor: "green",
});
let myColor = ref("white");

const test1 = () => {
	myTheme.bgColor = "pink";
	myColor.value = "yellow";
};
</script>

<style scoped>
.box1 {
	width: 200px;
	height: 200px;
	/* background-color: pink; */
	/* color: wheat; */

	/* 对象属性的形式需要加引号 */
	background-color: v-bind("myTheme.bgColor");
	/* 单独的变量引号可加可不加 */
	color: v-bind(myColor);
}
</style>