SFC CSS 功能：深层选择/插槽选择器/动态绑定

本文主要是介绍SFC CSS 功能：深层选择/插槽选择器/动态绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

深层选择器

如果您希望样式中的选择器scoped“深入”，即影响子组件，则可以使用:deep()伪类：

<style scoped>
.a :deep(.b) {/* ... */
}
</style>

以上内容将被编译为：

.a[data-v-f3f3eg9] .b {/* ... */
}

提示

创建的 DOM 内容v-html不受范围样式的影响，但您仍然可以使用深度选择器来设置它们的样式。

插槽选择器

默认情况下，范围样式不会影响渲染的内容<slot/>，因为它们被视为传入它们的父组件所拥有。要明确定位插槽内容，请使用:slotted伪类：

<style scoped>
:slotted(div) {color: red;
}
</style>

`v-bind()`在 CSS 中

SFC<style>标签支持使用 CSS 函数将 CSS 值链接到动态组件状态v-bind：

<template><div class="text">hello</div>
</template><script>
export default {data() {return {color: 'red'}}
}
</script><style>
.text {color: v-bind(color);
}
</style>

该语法适用于<script setup>，并支持 JavaScript 表达式（必须用引号引起来）：

<script setup>
import { ref } from 'vue'
const theme = ref({color: 'red',
})
</script><template><p>hello</p>
</template><style scoped>
p {color: v-bind('theme.color');
}
</style>

实际值将被编译为散列 CSS 自定义属性，因此 CSS 仍然是静态的。自定义属性将通过内联样式应用于组件的根元素，并在源值发生变化时进行响应式更新。

这篇关于SFC CSS 功能：深层选择/插槽选择器/动态绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！