vue-router向子组件传递参数

解决了什么问题

vue-router里父级获取到子组件的实例

  <router-view ref="rRouter" :msg="12">router-view>
复制代码

可以通过app.$ref.rRouter拿到当前渲染的子组件实例，而且在子组件中也可以用props获取到msg这个传参

发现问题

在写HJ的手机端list的时候，因为要用到jqweui的calendar（日历）组件

<script type="text/x-template" id="home">
    <input type="text"  readonly value="" data-toggle='date' onChange=""/>
script>
复制代码

在onchange的时候，要改变home组件的date1这个变量，如果直接放全局函数，就需要在全局也就是router-view组件的父级拿到当前渲染的组件的实例

完整测试代码

"app">
    "rRouter" :msg="12" @input="console.log($event)">

     var home = {
        props:['msg'],
        template: "
{{msg}}
"
    }
    var list = {
        mounted() {
            this.$emit('input','你好')
        },
        template: "
111
"
    }
    var router = new VueRouter({
        routes: [
            { path: '/', redirect: 'home' },
            { name: 'home', path: '/home', component: home },
            { name: 'list', path: '/list', component: list },
        ]
    })
    var app=new Vue({
        el: '#app',
        router: router,
    })
    console.log(app.$refs.rRouter.msg);//输出12
    app.$router.push('list');//输出你好
复制代码

---

待解决问题

• vue-router前进刷新后退不变

暂时针对两个页面，一列表页一详情页，进入详情页刷新，退回到列表页不刷新

• 1.通过deactivated和activated这两个keep-alive特有的生命周期，在每次离开这个组件的时候$destroy掉，下次进来就不会缓存
• 2.通过include exclude 来控制哪个页面缓存，哪个页面不用
• 在组件中的生命周期

参考文章

没找到原作者,本着分享精神 jingyan.baidu.com/article/f96…

deactivated(){ this.$destroy()}www.zhihu.com/question/61…

在使用include的时候必须component有name stackoverflow.com/questions/4…

---

求点赞，小白的愿望，会很开心的

转载于:https://juejin.im/post/5cff60c75188257a787645f3