Vue-router中几种通信的方式

1，$parent + $children

this.$ parent 可以直接访问该组件的父实例或组件；父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。

父组件：

data(){
	return{ message:'hello' }
},
compuet(){
	changeChildrenName(){
		return this.$children[0].number = 30 // [0]为第0项，因为父组件他可能有很多子组件
	}
}

子组件：

data(){
	return{ number:10 }
},
computed(){
	parentMsg(){
		return this.$parent.message
	}
}

2，provide+ inject
父组件

export default {
	provide{
		message:'to my son'
	}
}

子组件

<tempalte>
	<div>
		<h1>from my father </h1>
		{{ message }}
	</div>
</tempalte>
export default {
	inject:['message']
}

2，ref

ref为子组件指定一个索引名称，通过索引来操作子组件；

子组件

<tempalte>
	<div>
		<h1>son</h1>
	</div>
</tempalte>
export default {
	data(){
		return{
			age:20
		}
	},
	methods:{
		changeAge(){
			this.age = 50
		}
	}
}

父组件

<tempalte>
	<div>
		<child ref="childTap"/>  // 通过ref来注册一个组件的实例
	</div>
</tempalte>
export default {
	methods:{
		toChange(){
			console.log(this.refs.childTap.age) // 通过refs 可以访问属性data数据
			this.refs.childTap.changeAge // 也可以访问执行 methods方法
		}
	}
}

父子组件之间的传值 props + $emit