vue 子组件隔离父组件央视

要实现子组件隔离父组件样式，你可以使用一些技术来限制样式的作用范围。以下是一些常见的方法：

1. 使用作用域样式（Scoped Styles）：在 Vue 的单文件组件中，你可以在 `<style>` 标签中使用 `scoped` 属性，这样定义的样式只会应用于该组件的元素，而不会影响其他组件。例如：

<template>
  <div class="wrapper">
    <child-component></child-component>
  </div>
</template>

<style scoped>
.wrapper {
  /* 父组件样式 */
}

/* 子组件样式 */
</style>

2. 使用 CSS Modules：Vue 支持使用 CSS Modules 来实现样式的模块化和隔离。在使用 CSS Modules 时，每个组件的样式都会被自动局部化，避免了样式冲突。你可以在 Vue 的单文件组件中通过 `<style module>` 标签来开启 CSS Modules。例如：

<template>
  <div :class="$style.wrapper">
    <child-component></child-component>
  </div>
</template>

<style module>
.wrapper {
  /* 父组件样式 */
}

/* 子组件样式 */
</style>

注意：在使用 CSS Modules 时，通过 `$style` 对象来引用类名，这是由于 CSS Modules 自动生成的类名是动态的。

3. 使用 BEM（Block,