0

父组件(父组件)

<template>
  <children></children>
</template>

<script>
import children from './children'
export default {
  components: {
    children
  }
}
</script>

<style lang="less">
.desc {
  color: red;
}
</style>

子组件(子组件)

<template>
  <p class="desc">文案</p>
</template>

<style lang="less">
.desc {
  color: yellow;
}
</style>

显示颜色是为父组件设置的颜色。父组件和子组件样式的加载顺序有问题。是包装问题吗?

4

1 回答 1

0

您的元素的打包顺序是正确的:

  1. 你声明你的父组件。
  2. 您的父组件包括您的子组件。
  3. Webpack 查找您的子组件并对其进行处理,以便您的父组件可以使用它。
  4. 在处理它时,子组件的 CSS 被添加到您的样式表包中。
  5. 您的父组件现在已完全处理,已添加到您的样式表包中。
  6. 由于级联样式表的性质,您的父样式低于您的子样式,使其优先于它们。

为避免这种情况,您需要scoped在样式中使用关键字。

于 2019-11-11T06:27:38.257 回答