vue2的组件通信方式

组件交互/通信/传值

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

1.子组件内使用父组件数据  父-子

1.父组件传递数据给子组件 （可以传递静态属性 动态属性 ）

2.子组件接收并处理数据

	{

​				props:['title','msg','attrA],

​				template:``

​			}

App.vue

Student.vue

2.父组件内使用子组件的数据

事件发射 自定义事件

在子组件内发射 在父组件内接受

子组件发射时机

1.手动按钮发送

2.监听子组件内数据变化，然后发射

2.1 props实现子传父

props传参同props父传子参数类似，具体实现原理是父组件定义函数，并将函数传递给子组件，在子组件中调用，并将自己的数据作为参数传递给父组件的函数。大体可分为四步。

第一步，在子组件 标签上 上使用v-bind（简写为 :）绑定传递的参数名以及传递的处理函数；

第二步，在子组件的 script 中 添加 props 属性 ，并将 参数名 接收；

第三步，在子组件中调用其他函数来触发用 props接收的参数（也就是那个函数）

第四步，子组件的参数被传递出去

App.vue

School.vue

2.2 自定义事件实现子向父传递参数

2.2.1 第一种自定义事件

靠函数参数传递的方法将数据带给父组件，具体分三步：
第一步，在子组件 标签上 上使用v-on（简写为 @）绑定自定义的 事件名 以及对应的处理函数，可以类比原生事件 @click=“handle(e)”；

第二步，在子组件中调用其他函数，使用 this.$emit(‘事件名’,参数) 的方法触发事件；

第三步，子组件的参数被传递出去

App.vue

Student.vue

2.2.2 第二种自定义事件

Student组件不需要任何变化
主要变动有两处，第一处 是子组件标签中 使用ref属性；第二处 是不在methods或者watch中 定义处理函数，而是在生命周期函数中处理。
这样的好处是更加灵活，自定义事件可以添加其他异步操作，且对子组件绑定多个自定义事件时，也无需考虑太多的逻辑，不断地在 生命周期函数中 使用 $on 来处理即可。

 $on 接收两个参数，$on(自定义事件名,函数) 而函数可以用箭头函数来简写操作

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

App.vue

3 全局事件总线（GlobalEventBus）

全局事件总线是一种可以在任意组件间通信的方式，本质上就是一个对象。它必须满足以下条件：

1. 所有的组件对象都必须能看见他
2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

App.vue

Student.vue

School.vue

总结：

全局事件总线（GlobalEventBus）：

1. 一种组件间通信的方式，适用于任意组件间通信
2. 安装全局事件总线：

new Vue({
   	...
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
    ...
})

使用事件总线：

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)
    }
}

2.提供数据：`this.$bus.$emit('xxx',data)`

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

4  消息的订阅预发布

School.vue

Student.vue

总结：

消息订阅与发布（pubsub）：

消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

使用步骤：

安装pubsub：npm i pubsub-js

引入：import pubsub from 'pubsub-js'

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
		this.pid = pubsub.subscribe('xxx',this.demo)
    }
}

提供数据：pubsub.publish('xxx',data)

最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅