javascript - 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 具有唯一类，而另一些则没有。所以，除非我大错特错，如果我定义如何设置样式，比如说 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 .

那么问题来了:这样构造代码是否合理？这就是我想要理解的。 对于这种结构，我不喜欢的是 component-2 和 component-3 的某些元素的 css 规则是在这些组件之外定义的。

Answer 1

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