具有多根节点的子组件不能从父范围样式设置样式

Child component with muti-root nodes cannot be styled from parent scoped style

我需要在 Vue 3 + Vite 中从另一个正在使用它的组件来设置整个组件的样式。我正在尝试为组件标签设置 class，但它不起作用。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld class="hello"/>
</template>

<style scoped>
.hello {
  display: none;
}
<style>

HelloWorld.vue

<template>
 <header></header>
 <main v-bind="$attrs"></main>
<template>

vueJS中有两种样式：

  1. 全局样式
  2. 组件基础样式

在全局样式中，你只需要一个css文件，里面写了所有css，另一方面，如果你想要一个样式，你有组件基础样式parent 或您需要的 child。

/深

使用它，您可以轻松定位 child 个元素：

<style>
/deep/{
  .childElement{
     display:none;

  }    
}    
<style>

我认为这可能对您有所帮助。 :)

如果 HelloWorld.vue 组件有一个根元素，例如：

<template>
 <div class="hello-world">
   /* ... */
 </div>
</template>

您的代码无需更改任何内容即可运行，因为 class hello 将添加到 hello-world。阅读文档 -> Fallthrough Attributes

如果 HelloWorld.vue 组件有多个根节点，例如：

<header>...</header>
<main>...</main>
<footer>...</footer>

那么不会发生“自动属性失效行为”，您必须手动绑定 $attrs，否则您会收到警告：

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

阅读文档 -> Attribute Inheritance on Multiple Root Nodes

mutli-root 个组件有什么问题？

一旦你向一个组件添加了很多根节点，那么突然之间父元素就不能改变 style scoped 中的子元素样式了。

See it live

我不知道这是预期的行为还是一个错误，但如果您需要更新，see this issue

有没有办法为子 mutli-root-nodes 组件的元素设置样式？

一种方法是使用 non-scoped style:

<style>
.hello {...}
</style>

另一种方法是使用 style module:

<template>
  <HelloWorld :class="$style.hello" />
</template>

<style module>
.hello {
  background: blue;
  color: white;
}
</style>

See live example