vue 实现穿透

在 Vue 中，"穿透"通常指组件间的通信或样式穿透。以下是两种常见场景的实现方法：

组件通信穿透（跨层级传递数据/事件）

使用 provide/inject 实现祖先组件向后代组件直接传递数据：

// 祖先组件
export default {
  provide() {
    return {
      sharedData: this.dataToPass
    }
  }
}

// 后代组件
export default {
  inject: ['sharedData']
}

使用事件总线实现任意组件间通信：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A（发送事件）
EventBus.$emit('custom-event', payload)

// 组件B（接收事件）
EventBus.$on('custom-event', callback)

样式穿透（修改子组件样式）

在 Scoped CSS 中使用深度选择器：

/* 使用 >>> 语法（旧版） */
.parent >>> .child { color: red; }

/* 使用 /deep/ 语法 */
.parent /deep/ .child { color: red; }

/* 使用 ::v-deep 语法（推荐） */
.parent ::v-deep .child { color: red; }

属性穿透（传递未声明的props）

使用 v-bind="$attrs" 实现属性自动向下传递：

<child-component v-bind="$attrs"></child-component>

插槽内容穿透

使用 <slot> 实现内容透传：

<!-- 中间组件 -->
<template>
  <div class="wrapper">
    <slot></slot>
  </div>
</template>

这些方法可根据具体场景选择使用，组合使用能实现更复杂的穿透需求。注意合理控制穿透范围以避免组件耦合过度。