善用router-view 减少vuex的使用

2019-02-19  本文已影响0人  水君子Z

其实,子组件与父组件传值、子路由与父路由传值用的好,就可以大大的减少vuex的使用。
子组件给父组件传至大家都清楚,子路由给父路由传值,有个简单的方法,有很多人应该都没有发现。

父路由代码主要代码

<template>
    <div class="outer_box">
        <router-view @change="childChange"/>
    </div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
          childChange(res){
           //拿到子路由的回调返回值
            console.log(res)
          }
        }
    }
</script>
 

子路由代码主要代码

<template>
    <div class="child_box">
        <button @click="clickBtn">点击后父路由会触发</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
            clickBtn(){
                this.$emit('change','提交给父路由的参数')
            }
        }
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读