一、父组件向子组件通信通过传递属性或者动态属性

//父组件
<componentB number=5>
	<p slot="header">123</p>
	<p slot="footer">88888</p>
</componentB>

//子组件
{{ number }}
<script>
	export default {
//		props:['number'],
		:{
			'number':[Number,String]
		},
		data () {
			return {
				hello: 'i am component b'
			}
		},
		methods: {
			emitMyEvent () {
				this.$emit('my-event',this.hello)
			}
		}
	}
</script>

二、子组件向父组件通信通过emit自定义事件

//父组件
<componentB @my-event="onComaMyEvent"></componentB>
onComaMyEvent (params) {
        console.log("onComaMyEvent"+params);
    }
}

//子组件
<template>
	<div>
		{{hello}}
		<button @click="emitMyEvent">emit</button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				hello: 'i am component b'
			}
		},
		methods: {
			emitMyEvent () {
				this.$emit('my-event',this.hello) //触发自定义事件
			}
		}
	}
</script>

三、通过Slot进行组件直接的通信

//父组件
<componentB number=5>
	<p slot="header">123</p>
	<p slot="footer">88888</p>
</componentB>

//子组件
<slot name="header">no data</slot>
<p> no  ppppp</p>
<slot name="footer">no data</slot>

其他注意：使用组件树设计项目，配置文件链接各个组件-命名转换