父组件引用子组件，但是只能给父组件的自定义标签设置样式，子组件设置样式没用

在 Vue 中，父组件引用子组件时，子组件的样式是不会自动应用的。这是因为 Vue 使用了一种叫做“作用域 CSS”的技术，每个组件的样式都是独立的，不会影响其他组件的样式。为了让子组件的样式生效，你可以使用以下两种方式：

1. 使用 `scoped` 属性

在子组件的 `<style>` 标签中添加 `scoped` 属性，这样子组件的样式就只会应用到子组件自身，不会影响其他组件。例如：

<template>
  <div class="child-component">这是子组件</div>
</template>

<style scoped>
.child-component {
  color: red;
}
</style>

在父组件中引用子组件时，可以直接使用子组件的自定义标签，并给它设置样式，子组件的样式就会被正确应用了。

2. 使用 `>>>` 或 `/deep/` 选择器

如果你不想使用 `scoped` 属性，也可以在父组件中使用 `>>>` 或 `/deep/` 选择器来穿透子组件的作用域，直接应用子组件的样式。例如：

<template>
  <div class="parent-component">
    <my-child-component></my-child-component>
  </div>
</template>

<style>
/* 使用 >>> 选择器 */
.parent-component >>> .child-component {
  color: red;
}

/* 使用 /deep/ 选择器 */
.parent-component /deep/ .child-component {
  color: red;
}
</style>

这样父组件的样式就可以正确应用到子组件上了。不过需要注意的是，`>>>` 和 `/deep/` 选择器在一些情况下可能无法正常工作，因此建议还是使用 `scoped` 属性来限制子组件的样式。