Vue2 自定义指令真能实现组件间传值吗：用错反而更麻烦

严格说，不能直接。Vue2 的自定义指令作用在它所在组件的模板作用域里，binding.value 拿到的也只是本组件自己的数据，它天生不是跨组件通信的通道。想用它给另一个组件传值，本质上是在绕开 Vue 的数据流，短期能跑，长期会换来状态不同步、卸载泄漏、职责错位三笔债。真正要做组件间数据传递，应该走 props / emit、Vuex 或 provide / inject。下面先把结论说清，再把三类误用和各自的正确替代一次讲清。

先看结论

一句话：自定义指令适合封装「对 DOM 元素的行为」，不适合承载「组件之间的数据传递」。把这两件事的职责搞混，就是后面所有麻烦的起点。

要系统理解 Vue2 的指令与组件边界，可以先过一遍 Vue2 教程，把指令钩子、组件通信这两条线分清楚，再看后面的反例会更直观。这里先给一个判据：自定义指令的适用边界很窄，只负责「操作当前 DOM 元素的行为」；从性能取舍看，用它硬传值不会更快，反而绕开响应式带来额外隐患。

一、自定义指令到底能拿到什么

Vue2 的自定义指令通过钩子函数操作绑定元素，最常用的两个是 bind（第一次绑定到元素时）和 update（所在组件更新时）。钩子参数里的 binding.value 是模板上写在指令后面的表达式求值结果，而这个「所在组件」就是声明这条指令的那个组件。

// 一个最朴素的自定
义指令：挂载后让输入框自动聚焦
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

这段代码能跑，是因为它只操作 el 这一个 DOM 节点，和「别的组件」毫无关系。也就是说，自定义指令能影响的只是它挂着的那个元素，能读到的也只是本组件的 binding.value。它是 DOM 行为封装工具，不是组件间通信工具。（以上判断依据 Vue2 官方文档对指令作用域的说明。）

二、误区一：用指令把值塞给另一个组件

最常见的错法是：在 A 组件里写一条指令，指令内部去读某个全局变量，再把结果写进 B 组件的 data。看起来「A 改了、B 也变了」，但这两者的联系完全建立在副作用上，没有任何一处声明「它们为什么关联」。在浏览器运行这段错误代码时，B 的视图常常不刷新；失败时先检查是否绕过了 Vue 的响应式赋值，再修复：把共享状态提到 Vuex 或 provide/inject，而不是偷偷写进别的组件实例。

// 反例：用指令跨组件写值（不要照抄）
Vue.directive('sync-to-b', {
  inserted: function (el, binding) {
    // 偷偷把本组件的值写进另一个组件实例，耦合且不可追踪
    window.__bComponent.data.name = binding.value
  }
})

这种写法有三个坑：第一，B 的视图不会因为你直接改了它的 data 就可靠地刷新，绕过响应式赋值很容易踩坑；第二，A 和 B 通过全局变量绑死，谁改了全局、谁受影响完全不可追踪；第三，一旦 B 被销毁，这个引用就成了悬空指针。想对照 Vue3 里 ref 与组件边界的正确处理，可以看 Vue3 教程，里面讲清了跨组件拿 DOM 该走什么通道。

三、误区二：在指令里挂全局监听却忘记卸载

指令经常要操作 DOM 事件，比如在 bind 里给 window 加一个 resize 监听来算元素尺寸。如果忘了在 unbind 里移除，组件被销毁后监听器还在，就会内存泄漏，页面切几次路由就开始卡顿。

// 正确姿势：bind 加监听，unbind 必移除
Vue.directive('resize-log', {
  bind: function (el, binding) {
    el.__onResize = () => console.log(el.offsetWidth)
    window.addEventListener('resize', el.__onResize)
  },
  unbind: function (el) {
    window.removeEventListener('resize', el.__onResize)
    delete el.__onResize
  }
})

这条规则看似简单，却是自定义指令翻车的最高频原因：只要在钩子里挂了全局资源（事件、定时器、订阅），就必须在对应的销毁钩子里清算。漏掉一次，线上就会悄悄堆积「幽灵监听」。

四、正确做法：按场景选数据流

配置组件通信时，父传子优先用 props；验证是否真的传值成功，看子组件视图是否随父组件 data 变化即可，不必借助指令去 hack。把「DOM 行为」和「数据传递」拆开，问题立刻变简单：

• 父传子：用 props，这是 Vue 声明式数据流的本分；
• 子传父：用 emit 抛事件，父组件监听后自己改自己的状态；
• 跨层级或跨组件共享：用 Vuex 装全局状态，或用 provide / inject 在祖先与后代间透传；
• 只有「操作当前 DOM 元素」这类需求，才留给自定义指令。

// 父传子用 props，而不是指令
// 父组件
<child :name="userName" />
// 子组件
props: ['name']

配套把 Vue3 实战补齐，可以看 Vue3 课程，里面把组件通信与组合式写法串得更完整。记住一个判据：当你想「传值」时，十有八九该用数据流；当你想「改这个元素的样式或行为」时，才轮到指令。

总结

• 自定义指令拿到的 binding.value 来自它所在组件，它既不是事件总线，也不持有跨组件状态，不能直接做组件间传值。
• 用指令硬传值，换来的是状态不同步、引用悬空、不可追踪三笔债，别图一时省事。
• 凡是挂了全局事件、定时器、订阅的指令，必须在 unbind 里一一清理，否则内存泄漏。
• 传值走 props / emit / Vuex / provide-inject；只有操作当前 DOM 行为才用指令。
• 判据很简单：要「传值」用数据流，要「改 DOM 行为」才用指令。

常见问题

Q：自定义指令和组件到底有什么区别？

组件是带自己状态和视图的独立单元，适合封装「一段可复用的界面与逻辑」；指令是挂在已有元素上的行为钩子，适合封装「对单个 DOM 元素的操作」。组件负责「有什么」，指令负责「这个元素怎么动」。把组件通信塞进指令，就是让指令去干它不该干的活。

Q：指令里可以直接改别的数据吗？

可以改，但不该改本组件之外的数据。改本组件 data 是允许的，但写在指令里会让逻辑散落、难以追踪；改别的组件或全局变量更是反模式，会带来不可预测的刷新与销毁问题。需要共享数据时，请提升到 Vuex 或 provide / inject。

Q：Vue2 和 Vue3 的自定义指令写法差别大吗？

钩子语义上有调整：Vue2 是 bind / inserted / update / componentUpdated / unbind，Vue3 收敛为 created / beforeMount / mounted / beforeUpdate / updated / beforeUnmount / unmounted，并把 binding 的用法统一得更严格。核心结论不变——指令只管 DOM 行为，不负责组件间数据传递。

延伸学习

• 自定义指令：深入理解 Vue3 中的自定义指令，把钩子与生命周期对照着看。
• 指令常用场景：Vue 自定义指令三个常用场景一次讲清，照着练比硬记文档快。
• Txyvue3 课程：Vue3 配套微课，把组件通信与指令边界一次理顺。