vue中子组件的css样式写在父组件还是卸载子组件中

在Vue.js中，关于子组件的CSS样式应该放置的位置取决于设计原则和代码组织。以下是两种常见的做法：

1. **内联样式**：如果只需要针对特定子组件的一组简单样式，并且不需要复用，可以在子组件的`<style>`标签内直接编写，这样可以避免全局污染。例如：

   <template>
     <div class="child-component">
       <!-- 子组件内容 -->
     </div>
   </template>

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

2. **外部CSS文件或局部CSS模块**：如果需要复用或者子组件样式需要管理得更好，通常建议将它们放在单独的`.vue`组件的`scoped`（仅作用于当前组件）或者`<style lang="scss"/>(如使用Sass)外部CSS文件中。这样做的好处在于提高代码的可维护性和团队协作，同时也可以利用CSS预处理器的功能。在父组件中导入并应用到子组件上：

   <!-- 父组件.vue 文件 -->
   <template>
     <ChildComponent :styles="customStyles" />
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   export default {
     components: { ChildComponent },
     data() {
       return {
         customStyles: {
           '.child-class': {
             color: 'blue'
           }
         }
       };
     }
   };
   </script>

   // 子组件的<style>标签移除，样式单独放到子组件对应的<style lang="scss">部分，或者外部CSS文件里

   /* 或者外部CSS文件 child-component.scss */
   .child-class {
     /* ... */
   }