1. Vue样式定义
Vue中的样式通常定义在组件内部，通过<style>标签来实现。这些样式可以应用于模板中的HTML元素。Vue样式分为全局样式和局部样式两种。
1.1 全局样式
在Vue项目的根组件中引入全局样式文件，全局样式文件中的样式会应用到整个项目中的所有组件。这可以通过在根组件的<style>标签中添加全局样式来实现，或者通过外部样式文件引入。
<style>
/* 全局样式 */
body {
font-family: 'Arial', sans-serif;
}
</style>
1.2 局部样式
在Vue组件中，可以通过<style>标签来定义局部样式，该样式仅适用于当前组件。
<template>
<div>
<p>这是一个局部样式示例</p>
</div>
</template>
<style scoped>
/* 局部样式 */
p {
color: red;
}
</style>
2. Vue Scoped CSS
Scoped CSS是一个强大的功能，它允许我们将样式在特定组件内，防止组件耦合和意外副作用。
2.1 基本原理
当我们在Vue组件中使用<style scoped>时，Vue会使用PostCSS对CSS进行转换。这个过程包括：
- 为组件的元素添加一个唯一的数据属性（例如
data-v-f3f3eg9）。 - 重写CSS选择器，使其包含这个唯一属性。
例如，以下代码：
<template>
<div class="example">Hello</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
会被转换为：
<div class="example" data-v-f3f3eg9>Hello</div>
.example[data-v-f3f3eg9] {
color: red;
}
2.2 父子组件的Scoped CSS行为
当涉及到父子组件时，Scoped CSS的行为会变得复杂。例如，以下代码：
<!-- ParentComponent.vue -->
<template>
<div class="parent">
<ChildComponent />
</div>
</template>
<style scoped>
.parent {
background-color: #f0f0f0;
}
</style>
在这种情况下，ChildComponent的样式不会被ParentComponent的scoped样式所影响。
3. 组件样式定制技巧
3.1 组件样式控制
Vue组件文件中可以缺少script、template、style中的任意一个部分，程序不会报任何错误。
3.1.1 全局样式控制
在组件中定义的样式，默认是全局有效的。也就是说，其可以作用于当前组件中的标签、子组件的根标签及外部的标签。
<template>
<div>
<p>全局样式示例</p>
</div>
</template>
<style>
p {
font-size: 16px;
}
</style>
3.1.2 局部样式控制
只需在style标签中添加scoped属性即可，这也就是我们常说的局部作用域样式。
<template>
<div>
<p>局部样式示例</p>
</div>
</template>
<style scoped>
p {
font-size: 16px;
}
</style>
3.1.3 深度样式控制
为了让组件的局部样式（也就是局部作用域样式）影响子组件的子标签，可以使用Vue提供的深度作用域选择器来实现。
<template>
<div>
<ChildComponent />
</div>
</template>
<style scoped>
:deep(.child-style) {
font-size: 16px;
}
</style>
3.2 组件通信
在Vue中，组件之间的通信可以通过多种方式实现，如props、ref、emits等。
3.2.1 组件父与子之间的通信props
props是父组件向子组件传递数据的方式。
3.2.1.1 简单数组接收模式
// 子组件
export default {
props: ['items']
}
3.2.1.2 简单对象和复杂对象接收模式
// 子组件
export default {
props: {
item: {
type: Object,
default: () => ({})
}
}
}
3.2.2 组件通信之ref与defineExpose
ref是Vue提供的一种引用机制，可以用来引用子组件实例。
ref 的作用
// 父组件
const child = ref(null);
defineExpose 的作用
// 子组件
export default {
expose: ['someMethod']
}
运用ref和defineExpose的场景
当需要在父组件中调用子组件的方法时，可以使用ref和defineExpose来实现。
// 父组件
const child = ref(null);
child.value.someMethod();
3.2.3 组件通信之emits与defineEmits
emits是Vue提供的一种事件机制，可以用来在子组件中触发事件。
emits 的作用
// 子组件
export default {
emits: ['someEvent']
}
4. 内置组件
Vue提供了一些内置组件，如Component和Teleport。
4.1 内置组件Component
Component组件可以用来创建自定义组件。
<template>
<Component :is="MyComponent" />
</template>
<script>
import MyComponent from './MyComponent.vue';
</script>
4.2 内置组件之Teleport
Teleport组件可以用来将内容渲染到组件的任意位置。
<template>
<Teleport to="body">
<div>这是一个Teleport示例</div>
</Teleport>
</template>
通过以上内容，相信你已经对Vue中的CSS设置和组件样式定制技巧有了更深入的了解。在实际开发过程中，可以根据项目需求灵活运用这些技巧，提高开发效率和代码质量。