组件通信的6种方式

---

前言

提示：这里可以添加本文要记录的大概内容：

vue项目种常用的组件通信方式大致有6种：props、自定义事件、全局事件总线$bus、pubsub-js、Vuex、插槽

---

一、props

1. 适用场景：父子组件通信
2. 注意事项：
   2.1 如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据。
   2.2 如果父组件给子组件传递数据（非函数）：本质就是父组件给子组件传递数据。
3. 书写方式：有3种
   3.1 数组形式：[ ‘todos’ ]
   3.2 对象形式（声明数据类型）： { type:String }
   3.3 对象形式（声明数据类型，默认值…）：age: { type: Number,default: 20 }
4. 路由的props 书写形式：有3种
   4.1 布尔值 props: false(默认false)
   4.2 对象 {props: {id: 666, msg: ‘abc’}
   4.3 函数形式 props($route) { return {id: $route.query.id,msg: $route.query.msg}

二、自定义事件

1. 适用场景：子组件给父组件传递数据
2. 主要方式$on绑定自定义事件。 、 $emit触发自定义事件 、 $off解绑自定义事件

三、全局事件总线$bus

1. 适用场景：万能，父子、兄弟组件皆可
2. 在main.js文件中安装即可

new Vue({
    
    
  render: h => h(App),
  // 安装全局事件总监
  beforeCreate() {
    
    
    Vue.prototype.$bus = this
  }
}).$mount('#app')  			

四、pubsub-js 发布与订阅

1. 适用场景：万能，父子、兄弟组件皆可
2. 在React框架中使用比较多

import pubsub from 'pubsub-js'

五、Vuex

1. 使用场景：万能

六、插槽

1. 适用场景：父子组件通信—一般传结构
2. 三种插槽
   2.1 默认插槽
   2.2 剧名插槽
   2.3 作用域插槽

---