vue 父级路由调用子路由方法及子路由传值给父级路由
1、父级路由调用子路由的方法子路由中定义了一个getData()方法methods:{getData(){console.log('这是子路由方法 由父级路由触发')}}在父级路由页面中给router-view加ref属性<div class="content"><router-view ref="child"></router-view></div>
·
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)
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)