Vue 组件通信 极简速记版

一、ref / $refs

作用：父组件获取子组件实例 / 获取 DOM 元素

vue

<!-- 子组件/标签打标记 -->
<son ref="boy"></son>
<h1 ref="hh"></h1>

js

// 获取子组件
this.$refs.boy.属性/方法
// 获取DOM
this.$refs.hh

一句话 ：打标记 → 用$refs拿实例 / DOM

---

二、组件自定义事件（子 → 父 通信）

1. 绑定方式

• 模板绑定：@自定义事件名="回调"
• 代码绑定：this.$refs.xxx.$on('事件名', 回调)

2. 核心口诀

父绑定，子触发

• 父：绑定事件 + 写接收方法
• 子：this.$emit('事件名', 数据) 触发

3. 常用 API

• $on：绑定事件
• $once：只触发一次
• $off：解绑事件
• 组件销毁自动解绑所有事件

---

三、父子通信总结

1. 父 → 子 ：props
2. 子 → 父 ：自定义事件（$emit）
3. 跨任意层级 ：provide / inject

---

四、provide /inject

作用：祖先 → 后代（无限层级）传数据 / 方法

js

// 祖先组件
provide() {
  return { 数据/方法 }
}
// 后代组件
inject: ['数据名']

注意：单向数据流，不推荐后代直接修改

---

五、全局事件总线 $bus

作用：任意组件通信（兄弟 / 跨级）

1. 安装（main.js）

js

new Vue({
  beforeCreate() {
    Vue.prototype.$bus = this
  }
})

2. 使用口诀

谁接收，谁绑定；谁发送，谁触发

js

// 接收方（绑定）
mounted() {
  this.$bus.$on('事件名', (数据)=>{})
}
// 发送方（触发）
this.$bus.$emit('事件名', 数据)

好习惯 ：beforeDestroy 用$off解绑

---

六、消息订阅 - 发布（pubsub-js）

作用：任意组件通信（和总线二选一即可）

js

import pubsub from 'pubsub-js'

// 订阅（收消息）
this.pid = pubsub.subscribe('消息名', (name, data)=>{})

// 发布（发消息）
pubsub.publish('消息名', 数据)

// 取消订阅
pubsub.unsubscribe(this.pid)

---

七、插槽（传 HTML 结构）

1. 默认插槽

子组件：<slot>默认内容</slot>

2. 具名插槽（多个坑位）

子：<slot name="xxx"></slot>父：slot="xxx" / #xxx（推荐）

3. 作用域插槽（子传数据给父渲染）

子：<slot :数据名="变量"></slot>父：<template slot-scope="scope">作用：数据在子，结构父决定

---

八、快速访问组件

• $parent：获取父组件实例
• $children：获取所有直接子组件数组
• $root：获取根 Vue 实例

// Parent.vue
export default{
    mounted(){
        this.$children[0].someMethod() // 调用第一个子组件的方法
        this.$children[0].name // 获取第一个子组件中的属性
    }
}

// Child.vue
export default{
    mounted(){
        this.$parent.someMethod() // 调用父组件的方法
        this.$parent.name // 获取父组件中的属性
    }
}

---

九、attrs / listeners（跨层级透传）

作用：爷孙通信，中间组件不写 props / 事件

• $attrs：透传未声明的属性
• $listeners：透传所有事件

vue

<!-- 中间组件直接透传 -->
<grandson v-bind="$attrs" v-on="$listeners"></grandson>

配合：inheritAttrs: false（避免属性挂到根元素）

---

终极选型口诀（背会直接用）

1. 父子通信 ：父→子props，子→父自定义事件
2. 跨多级后代 ：provide/inject
3. 任意组件 / 兄弟 ：事件总线 或 订阅发布
4. 传 HTML 结构 ：插槽
5. 快速拿组件 / DOM ：ref/$refs
6. 跨层级透传属性 / 事件 ：$attrs/$listeners