解决了什么问题
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"></script>
复制代码
在onchange的时候,要改变home组件的date1这个变量,如果直接放全局函数,就需要在全局也就是router-view组件的父级拿到当前渲染的组件的实例
完整测试代码
<div id="app">
<router-view ref="rRouter" :msg="12" @input="console.log($event)"></router-view>
</div>
var home = {
props:['msg'],
template: "<p>{{msg}}</p>"
}
var list = {
mounted() {
this.$emit('input','你好')
},
template: "<p>111</p>"
}
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