vue之keep-alive-----组件切换

最新推荐文章于 2025-05-15 10:41:07 发布

小桥流水人家丶

最新推荐文章于 2025-05-15 10:41:07 发布

阅读量153

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/xu568110526/article/details/130510415

版权

该文章展示了在Vue.js中如何使用keep-alive标签来避免在组件切换时销毁组件状态，特别是对于input框中输入的内容，可以实现数据的持久化。通过在App.vue中动态切换demo1和demo2两个组件，演示了keep-alive的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo1.vue

<template>
  <div>demo1</div>
  <input type="text" />
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="scoped"></style>

demo2.vue

<template>
  <div>demo2</div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="scoped"></style>

App.vue

<template>
  <keep-alive>
    <component :is="tabComponent"></component>
  </keep-alive>
  <button @click="changHandle">切换组件</button>
</template>
<script>
import demo1 from "./components/demo1.vue";
import demo2 from "./components/demo2.vue";
export default {
  components: {
    demo1,
    demo2,
  },
  data() {
    return {
      tabComponent: "demo1",
    };
  },
  created() {},
  computed: {},
  methods: {
    changHandle() {
      this.tabComponent = this.tabComponent == "demo1" ? "demo2" : "demo1";
    },
  },
};
</script>
<style lang="scoped"></style>

总结：如果不加 keep-alive 标签进行包裹的话，每次切换都会销毁掉 input 框当中输入的内容