vue前端开发自学,借助KeepAlive标签保持组件的存活

news2024/11/15 17:19:10

vue前端开发自学,借助KeepAlive标签保持组件的存活！如果不想让组件在切换的时候，被默认操作（卸载掉了）。他们需要使用这个这个表情哦。

下面给大家看看代码情况。

<template>
    <h3>ComA</h3>
    <p>{{ message }}</p>
    <button @click="changeHandle">切换数据</button>
</template>
<script>
    export default{
        data(){
            return {
                message:"老数据"
            }
        },
        methods:{
            changeHandle(){
                this.message = "新数据"
            }
        }
    }
</script>

这个代码是来自ComA.vue的内容。里面有一个切换数据的按钮。可以控制当前组件里面的p标签的内容。目的是为了显示给大家看看，组件切换的时候，默认是会被卸载的。再次切回来，就会重新走一遍组件的生命流程。

<template>
  <h3>动态切换组件的显示</h3>
  <KeepAlive>
    <component :is="ComponetShow"></component>
  </KeepAlive>
  
  <button @click="changeShow">切换组件显示</button>
</template>
<script>
import ComA from './components/ComA.vue';
import ComB from './components/ComB.vue';
  export default{
    data(){
      return{
        ComponetShow:"ComA"
      }
    },
    components:{
      ComA,
      ComB
    },
    methods:{
      changeShow(){
        this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"
      }
    }
   
  }
</script>

这个代码是来自App.vue入口组件的内容。里面我们使用了keepAlive标签，把之前那个组件显示的标签，包围起来。就可以确保，切换组件不会再触发卸载了。