100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue-router向子组件传递参数

vue-router向子组件传递参数

时间:2019-10-02 01:20:00

相关推荐

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组件的父级拿到当前渲染的组件的实例

完整测试代码

<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);//输出12app.$router.push('list');//输出你好复制代码

待解决问题

vue-router前进刷新后退不变

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

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

参考文章

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。