vue2.x 组件通信

组件通信

1.父传子：props传参
2.子传父：事件传递
3.父传子refs调用
4.祖传子+孙：provied + inject
5.组件间：eventBus
下面直接把前四种写在一起，eventBus抽空加上
父组件

<template>
	<div>
		<ZuOne :testProp='one' @look='look' ref='goodBoy'></ZuOne>
		<span @click='testThing'>123</span>
	</div>
</template>

<script>
	import ZuOne from '../../components/zuOne'
	export default {
		components: { ZuOne },
		// provied通信
		provide: {
			Two: this.two
		}
		data () {
			return {
				one: 'one',	 // props传参
				two: 'two'
			}
		}
		methods: {
		// 事件传递
			look (a) {
				console.log('look', a)
			},
			// ref 通信
			testThing () {
			// 这里要求子组件有这个方法say
				this.$refs.goodBoy.say()
			}
		}
	}
</script>

子组件

<template>
	<div>
		<button @click='testThing'>123</button >
	</div>
</template>

<script>
		export default {
			// 对应上面的provide,该组件的子组件也可通过inject获取
			inject: ['Two']
			props: {
				testProp: {
					type:  string,
					default: 'tt'
				}
			},
			methods: {
				say () {
					console.log('点个赞吧')
				}，
				testThing () {
					//	第一个是加在组件上的事件名，第二个是要传递的参数
					this.$emit('look', 123)
				}
			}
		}
</script>