我应该如何合理地组织vue.js组件？

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有唯一的类，而其中一些没有。所以，除非我大错特错，如果我定义了如何在index.vue文件中设置样式，比如index.vue文件中的样式，那么样式将由它的所有子元素继承。这意味着可以(虽然不完全确定是否合理)在component-1.vue和component-2.vue文件中使用惟一类(使用<style scoped>)来样式元素，以及在index.vue中使用非唯一类(在本例中是section-1、container、section-container)的样式元素。这考虑到了section-1，container，section-container在component-1.vue和component-2.vue中的存在。

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

Answer 1

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