Question

假设我有一个索引页index.vue由这样的组件构成：

index.vue

<template>
<div>
  <component-1 />
  <section class="section-1">
    <div class="container section-container">
      <component-2 />
      <component-3 /> 
    </div>
  </section>
  <component-4>
</div>
</template>

import Component-1 from '~/components/Component-1'
import Component-2 from '~/components/Component-2'
import Component-3 from '~/components/Component-3'
import Component-4 from '~/components/Component-4'


export default {
  components: {
      Component-1
      Component-2
      Component-3
      Component-4
  }
}

<style>
// style for the index page
</style>

然后我还收到了几个文件：component-2.vue和component-3.vue我还声明了一些css样式规则。让我们假设上面提到的组件中的某些div具有唯一的类，其中一些不是。所以，除非我非常错误，如果我在section-1文件中定义如何设置样式，例如index.vue，则样式将由其所有子项继承。这意味着在component-1.vue和component-2.vue文件中使用唯一类（使用<style scoped>）和非唯一的样式元素设置元素是可能的（不完全确定是否合理） section-1内的类（在这种情况下为container，section-container，index.vue）。并且考虑到section-1和container中存在section-container，component-1.vue，component-2.vue这一事实。

所以问题是：构造这样的代码是否合理？这就是我想要了解的内容。我对这个结构不喜欢的是，组件-2和组件3的某些元素的css规则是在这些组件之外定义的。

Answer 1

使用<style scoped>命名要命名空间的元素。我在一个用Vue编写的非常复杂的应用程序上工作，当我需要设置许多组件共享的大量元素时，我要么在父组件中包含未编组的样式，要么在./src/scss/中使用scss或css模块设置这些共享元素的样式。这样，您就可以利用Vue的范围样式，但如果需要，还可以创建更多可重复使用的样式。

我该如何以合理的方式组织vue.js组件？

1 个答案: