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