Vue如何避免样式穿透到子组件？

在Vue中，为了避免样式穿透（即父组件的样式对子组件生效），可以使用以下几种方法：

1. **局部样式** (`scoped`属性)：在CSS文件中，给选择器添加`scoped`属性，这样只有包含该样式的组件内的元素才会应用这些样式。这通常是防止无意间污染全局样式的好实践。

   /* parent.vue 的 scoped CSS */
   .parent .child-class {
     color: red;
   }

2. **作用域插槽（Slot Scope）**：在子组件的模板中，可以使用`slot-scope`来为每个插槽创建独立的作用域，进而限制样式的影响范围。

   <!-- Child.vue -->
   <template>
     <div v-slot="{ scope }">
       <span :class="scope.$attrs" slot="default">{{ content }}</span> <!-- 使用 slot-scope 获取属性并传给子元素 -->
     </div>
   </template>

3. **使用 CSS Modules** 或者 **CSS Inheritance Breakpoints**：这两种技术都可以帮助你在开发过程中更好地管理组件间的样式隔离。

4. **避免直接修改DOM属性**：父组件不要直接操作子组件的DOM属性来改变样式，而是尽量通过props或自定义事件来传递数据。

总之，通过合理使用局部样式和组件化的设计，可以有效避免样式穿透，保持组件的可维护性和复用性。