vue组件通信

组件传值

一、props/emit
父传子 props
子传父 this.emit('‘func’,data)
二、$parent $children
官网不推荐，作为紧急使用方法，推荐props/emit
三 provide inject
provide. 用来传递
inject. 用来接收

父组件
export default {
  provide: {

      for: "demo"

    },}
 子组件
 export default {
  inject: ['for'],
created(){
        console.log(this.for,'3333');

}
}
孙组件
 export default {
  inject: ['for'],
created(){
        console.log(this.for,'3333');

}
}

四、ref/refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据， 我们看一个ref来访问组件的

五、eventBus

1.建立一个空间。把这个空间挂在vue原型上
Vue.prototype.$EventBus = new Vue();
2.发送

this.$eventbus.$emit('func')

3.接收

this.$eventbus.$on('func',()=>{})

4.移除

this.$eventbus.$off('func',{})

eventBus又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。
eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

六、Vuex

七、localStorage/sessionStorage

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。

通过window.localStorage.getItem(key)获取数据

通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse()/JSON.stringify()做数据格式转换

localStorage/sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

八attrs与listeners

$attrs–继承所有的父组件属性（除了 prop 传递的属性、class 和 style ），一般用在子组件的子元素上

$ listeners属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on=“$listeners” 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

方法传递

父调用子

this.$refs.子组件.method

子调用父

1。this.$parent.event
2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可。
3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可。