Vue组件之间数据通信12种方式_组件通信(2)

import son from “./son.vue”;
export default {
name: father,
data() {
msgData: “父组件数据”;
},
methods: {
myFunction() {
console.log(“vue”);
}
},
components: {
son
}
};

子组件：

// 子组件

{{msg}}

<button @click=“fn”>按钮

## 2.子组件向父组件传递数据（$emit的用法）


**$emit的特点：**


* $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数


**用法：**


父组件：

// 父组件

子组件：

//子组件

## 3.兄弟组件通信


兄弟组件通信可以借助父组件交互


A组件 B组件


1. A组件数据传递给共同的父组件 再有父组件接受后传递给B组件 


2. 通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。



## 4、ref / $refs


这种方式也是实现父子组件之间的通信


ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法


**用法：**


**在子组件中：**

export default {
data () {
return {
name: ‘JavaScript’
}
},
methods: {
sayHello () {
console.log(‘hello’)
}
}
}

**在父组件中：**

调用子组件使用ref 获取子组件实例

## 5、eventBus事件总线（$emit / $on）


eventBus事件总线适用于**父子组件、非父子组件**等之间的通信，使用步骤如下：


vue事件总线（[eventBus](https://bbs.csdn.net/topics/618166371)），通过创建一个空的vue实例作为全局事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件


  
**（1）创建事件中心管理组件之间的通信**

// main.js
Vue.prototype.$bus=newVue()//child2this.$bus.$emit{(}^{\prime }bu{s}^{\prime }{,}^{\prime }bus传值,组件2传过来{的}^{\prime })//child2this.$bus.$on(‘bus’, (msg)=> {
console.log(‘msg’, msg)
})

**（2）发送事件 假设有两个组件home About**  
![](https://img-blog.csdnimg.cn/ecc67ca7f8234b638c5efff45c405b62.png)



![](https://img-blog.csdnimg.cn/ba3585f6ed8a4cc6b591d3ce6aa8c70f.png)  
**（3）接收事件**  
![](https://img-blog.csdnimg.cn/2d8d29254afc47edb7ca0a5285a1a467.png)


在上述代码中，这就相当于将count值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，**后期维护起来会很困难**。  
**vue3不再使用 废除了**


## 6、依赖注入（provide / inject）


  
 这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。


provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。


provide 钩子用来发送数据或方法。  
 inject钩子用来接收数据或方法  
 用法：  
 父组件中：  
  

provide() {
return {
num: this.num
};
}

子组件中：

inject: [‘num’]

还有另一种写法，这种写法可以访问父组件中的所有属性：

provide() {
return {
app: this
};
}
data() {
return {
num: 1
};
}

inject: [‘app’]
console.log(this.app.num)

### 7.$parent / $children



* 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
* 使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。


**用法：**


子组件中：

{{message}}

获取父组件的值为: {{parentVal}}

## 8. $children


### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)