组件之间数据信息传递方法

1.props（数据双向绑定，props，可祖传父，父传子能隔代）

将组件中需要传递的东西交给共同的父亲，父亲再将数据交给其中一个儿子，这个过程通过props的方法传递，让son2接收 props['xxx'],此时接收的数据出现在son2的实例对象vc身上，所以模板可以使用。

此时son1要获得数据1，father就要提前创造一个函数传递给son1,然后son1调用函数。此时就可以定义在father中的函数，进行操作，这就意味着只要son1调用函数，vue就会重新解析模板，然后更新数值。

总结：借用父亲创造函数，子组件调用函数并且传参传到父亲创造的函数中

结合todolist案例

<MyFooter :todos="todos" :checkAllTodo=" checkAllTodo" :clearAllTodo="clearAllTodo"/>

props:['todos','checkAllTodo','clearAllTodo'],methods: {checkAll(e){this.checkAllTodo(e.target.checked)},deleteAll(value){this.deleteAllTodo(value)}},

2.自定义事件法（v-on/ref，父传子，不能隔代,不用props接收）

1.自定义事件法是组件之间的一种通信方式，适用于子组件传递给父组件。

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

方式一，在父组件中：

<Demo @hello="test"/>或 <Demo v-on:hello="test"/>

方式二，在父组件中：

...... js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('hello',this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4. 触发自定义事件：this.$emit('hello',数据)

5. 解绑自定义事件:this.$off('hello')

6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。

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

结合todolist案例

原来App中传递给MyHeader以及MyFooter使用函数传递的地方就可以更改为利用自定义事件去修改.原来使用props接收函数的地方就可以去掉，但是传递数据的地方不能去掉。

将数据双向绑定改为@，调用函数的地方使用$emit

<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @deleteAllTodo="deleteAllTodo"/>

 methods: {checkAll(e){this.$emit("checkAllTodo",e.target.checked)},deleteAll(value){this.$emit("deleteAllTodo",value)}},

3.全局事件总线（GlobalEventBus）

找出一个公用的都能获取数据的地方，也就是vue。

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

在main.js中安装

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

3. 使用事件总线：

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

```js
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
```

(2). 提供数据：this.$bus.$emit('xxxx',数据)

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

-----提供数据的组件

   export default {name:'Student',data(){return{name:'张三',sex:'男',}}, methods:{sendStudentName(){this.$bus.$emit('hello',this.name)}}
}

-----接收数据的组件

 mounted(){// console.log("School",this.x);this.$bus.$on('hello',(data)=>{console.log('我是school组件,收到了数据',data);})},beforeDestroy(){this.$bus.$off('hello')}

4.消息订阅与发布（任意组件之间）

1. 一种组件间通信的方式，适用于任意组件间通信

2. 使用步骤：

(1)安装pubsub：npm i pubsub-js

(2) 引入: import pubsub from 'pubsub-js

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

```js

methods(){

demo(data){......}

}

......

mounted() {

this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

}

```

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

5. 最好在beforeDestroy钩子中，用 PubSub.unsubscribe(pid)去取消订阅。