善用router-view 减少vuex的使用

其实,子组件与父组件传值、子路由与父路由传值用的好,就可以大大的减少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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,448评论 0 11
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,015评论 1 12
  • 渲染函数和jsx 在vue中我们可以不用template来指定组件的模板,而是用render函数来创建虚拟dom结...
    6e5e50574d74阅读 738评论 0 0
  • Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有...
    彬_仔阅读 27,299评论 12 114
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,295评论 0 25