在
Vue 3中实现tab
标签页切换时数据
不变，可以采用以下几种常见方法：
### 1
. 使用 `keep-alive`
组件
`keep-alive` 是
Vue内置的一个抽象
组件，它的作用是在动态
组件切换时，缓存不活动的
组件实例，而不是销毁它们，这样在切换回来时，
组件的状态和数据就不会丢失。
```
vue
<template>
<div>
<div>
<button @click="activeTab = &#
39;tab1&#
39;">Tab 1</button>
<button @click="activeTab = &#
39;tab2&#
39;">Tab 2</button>
</div>
<keep-alive>
<component :is="activeTab"></component>
</keep-alive>
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
import Tab1 from &#
39;
./Tab1
.vue&#
39;;
import Tab2 from &#
39;
./Tab2
.vue&#
39;;
const activeTab = ref(&#
39;tab1&#
39;);
</script>
```
在上述代码中，`keep-alive` 包裹了动态
组件 `component`，当切换 `activeTab` 的值时，对应的
组件会被缓存，数据不会丢失。
### 2
. 全局状态管理
使用 `Pinia` 或 `
Vuex` 来管理全局状态，将需要保持的数据存储在全局状态中。这样无论在哪个 tab
标签页，都可以访问和修改这些数据。
#### 使用 Pinia 示例
```
vue
<template>
<div>
<div>
<button @click="activeTab = &#
39;tab1&#
39;">Tab 1</button>
<button @click="activeTab = &#
39;tab2&#
39;">Tab 2</button>
</div>
<component :is="activeTab"></component>
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
import { useStore } from &#
39;
./store&#
39;;
const activeTab = ref(&#
39;tab1&#
39;);
const store = useStore();
</script>
```
```
javascript
// store
.js
import { defineStore } from &#
39;pinia&#
39;;
export const useStore = defineStore(&#
39;main&#
39;, {
state: () => ({
data: {
// 存储需要保持的数据
someData: &#
39;some value&#
39;
}
}),
actions: {
// 可以定义修改数据的方法
updateData(newValue) {
this
.data
.someData = newValue;
}
}
});
```
在这个示例中，将需要保持的数据存储在 `Pinia` 商店中，各个 tab
标签页都可以访问和修改这些数据，切换
标签页时数据不会丢失。
###
3. 本地
组件状态提升
将需要保持的数据提升到父
组件中进行管理，然后通过 props 将数据传递给子
组件，子
组件通过 `emit` 事件将修改后的数据传递回父
组件。
```
vue
<!-- Parent
.vue -->
<template>
<div>
<div>
<button @click="activeTab = &#
39;tab1&#
39;">Tab 1</button>
<button @click="activeTab = &#
39;tab2&#
39;">Tab 2</button>
</div>
<component :is="activeTab" :data="sharedData" @updateData="updateData"></component>
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
import Tab1 from &#
39;
./Tab1
.vue&#
39;;
import Tab2 from &#
39;
./Tab2
.vue&#
39;;
const activeTab = ref(&#
39;tab1&#
39;);
const sharedData = ref({ someData: &#
39;some value&#
39; });
const updateData = (newValue) => {
sharedData
.value
.someData = newValue;
};
</script>
```
```
vue
<!-- Tab1
.vue -->
<template>
<div>
<input v-model="localData" @input="updateParentData">
</div>
</template>
<script setup>
import { defineProps, defineEmits } from &#
39;
vue&#
39;;
const props = defineProps({
data: {
type: Object,
required: true
}
});
const emits = defineEmits([&#
39;updateData&#
39;]);
const localData = ref(props
.data
.someData);
const updateParentData = () => {
emits(&#
39;updateData&#
39;, localData
.value);
};
</script>
```
通过这种方式，将数据的控制权交给父
组件，切换 tab
标签页时数据不会丢失。
本文介绍了在使用Vue3进行开发时，遇到Toolbar和Editor问题的解决方案，即暂时禁用Vetur插件以消除冲突。
扫一扫
到【灌水乐园】发言
2054
