vue父路由调用子路由方法及子路由调用父路由方法

最新推荐文章于 2023-07-05 20:33:35 发布

又菜又无奈

最新推荐文章于 2023-07-05 20:33:35 发布

阅读量1.6k

点赞数 3

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_52131798/article/details/119937525

版权

父路由调用子路

合理运用ref属性

<template>
    <div>
        <router-view  ref="Childmain"/>
    </div>
</template>
<script>
    created(){
    this.$refs['Childmain'].childe()
    }
</script>

调用时可能会出现报错,没猜错的话报错原因是子路由还未加载，这边建议
使用setTimeout(）代码延迟5毫秒执行就行

或者使用this.nextTick(() => {})

this.$nextTick(() => {
    this.$refs['Childmain'].childe()
})

子路由调用父路由事件

this.$emit("fathre")

父路由.vue


<template>
    <div>
     <router-view @fathre="updatas"/>
    </div>
</template>
<script>
export default {
    data(){},
    methods:{
        updatas(){
        window.console.log('零杠六')
        }
    }
}
</script>

子路由.vue

所有子路由都可使用下面的方法调用视口组件(父路由)的某个事件