Vue组件通讯的方式

props

父传子

props:{}

$emit

子传父

emits:['eventName'] //3.x写法
this.$emit(eventName,value)

自定义事件

组件传组件，需要总线

2.x总线bus.js

import Vue from 'vue'
export const bus = new Vue()

3.x总线

import ee from 'event-emitter'
export default const = ee()

引用监听

import bus from './bus.js'
bus.on('eventName',fn) //监听
bus.off('eventName',fn) //销毁
bus.emit('eventName',value) //提交

$attrs

父传子，接收props未接收的参数

this.$attrs
//向子组件传递$attrs接收到的所有数据
v-bind="$attrs"

//去掉$attrs传值给子，而子只有一个元素上绑定了无用属性
export default{
    inheritAttrs:false
}

$parent

获取父组件数据

this.$parent

$refs

获取子组件数据

this.$refs.name

provide

向子孙传参

3.x

import {computed} from 'vue'
export default{
    data(){
	return{
	    name:'vue'
	}
    }
    provide(){
	return {
	  info:computed(()=>{this.name})
	}
    }
}

inject

接收祖辈传参

export default{
    inject:['info']
}

vuex