vue 父级路由调用子路由方法及子路由传值给父级路由

1、父级路由调用子路由的方法

子路由中定义了一个getData()方法

methods:{
	getData(){
		console.log('这是子路由方法 由父级路由触发')
	}
}

在父级路由页面中给router-view加ref属性

 <div class="content">
	<router-view ref="child"></router-view>
 </div>

接着调用子路由的getData()方法

mounted(){
	this.$nextTick(()=>{
		this.$refs.child.getData()    //这里要注意判断 有的子路由没有getData()这个方法的话会报错
	})
}

2、子路由传参给父级路由

父级路由页面中绑定方法

<div class="content">
	<router-view ref="child" @childClick="childClick"></router-view>
 </div>
 export default{
 	//……
 	methods:{
 		childClick(e){
			console.log('接收子路由传来的值= '+e)
		}
 	}
 }

子路由通过$emit触发父级路由中的方法

methods:{
	函数名(){
		let data=''   //要传的值
		this.$emit('childClick',data)
	}
}