Vue组件复用问题的一个解决方法

一、问题

在vue中,如果路由指向的页面组件【1】是同一个,那么路由出口显示的页面组件就不会被重新渲染。

如:有这样三个页面,视图列表引用的是list.vue,新增表单和回显表单使用的都是form.vue。

当我们在“视图列表”过到“新增表单”或者“回显表单时”,都是没有问题的;

而当我们从“回显表单”过到“新增表单”时,就会发现页面没有被刷新,“新增表单”还会带有“回显表单”刚刚的数据;

这就涉及到“vue组件复用”的问题。

二、原因

如果两个路由都渲染同个组件,组件的生命周期方法(created或者mounted)不会再被调用, 组件会被重用,显示上一个路由渲染出来的自建

<router-view/>

 三、解决

其中一个解决方法是:加唯一key。

在 router-view上加上一个唯一的key,来保证路由切换时都会重新触发生命周期方法((created或者mounted),确保组件被重新初始化。

<router-view :key="key"/>

 

唯一key:这里涉及到vue的计算属性【2】,当依赖的key值发生改变时,就会触发生命周期的方法初始化页面。

 

四、补充

【1】什么是组件

组件(Component)是 Vue.js 的功能,可以扩展 HTML 元素,封装可重用的代码。大组件嵌套小组件,小组件又有连接更小的组件,构建出独立可复用的组件,最后形成大型的应用。

当我们拿到一个前端项目,启动之后可以看到,一个大的页面里面有列表组件,列表组件里面又有按钮组件,就是这样一层层的嵌套。

【2】计算属性

未完待续...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗谦谦粉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值