vue2 在tabs标签页中 编辑时候 如果当时已经渲染了数据 没有关闭当前 点了其他的tabs页 再进来 怎么依然展示上次点击的数据
时间: 2024-03-15 19:45:18 浏览: 76
Vue在页面数据渲染完成之后的调用方法
可以通过在Vue组件中使用`keep-alive`来缓存组件,从而实现在切换标签页时不重新渲染组件的效果。具体实现方法如下:
1. 在`<keep-alive>`标签中包裹需要缓存的组件,例如:
```html
<keep-alive>
<router-view></router-view>
</keep-alive>
```
2. 在需要缓存的组件中,添加`name`属性,例如:
```javascript
export default {
name: 'MyComponent',
// ...
}
```
3. 在需要缓存的组件中,使用`activated`钩子函数来判断是否需要重新获取数据并更新视图,例如:
```javascript
export default {
name: 'MyComponent',
activated() {
if (!this.data) {
this.getData();
}
},
methods: {
getData() {
// 发送请求获取数据
// ...
this.data = responseData;
}
}
}
```
这样,在切换标签页时,如果之前已经渲染过`MyComponent`组件,则不会重新渲染组件,而是直接展示之前的数据。如果需要更新数据,可以在`activated`钩子函数中手动触发获取数据的方法。
阅读全文