当前位置: 首页> 房产> 家装 > vue3中使用keepalive和component

vue3中使用keepalive和component

时间:2025/7/11 1:25:39来源:https://blog.csdn.net/qq_42931285/article/details/140002717 浏览次数:0次

vue3和vue2中有些差异,直接上代码:

  <KeepAlive include="aComponent"><component :is='compList[active]'@goDetail="goDetail"@back="back" /></KeepAlive>  
<script setup lang="ts">
/*** 将事件从报告图表中抛上来,传递具体数据*/
import { ref ,markRaw} from 'vue'
import aComponent from './Acomponent.vue'
import bcomponent from './Bcomponent.vue'const dataDownConfig = ref(null);
const active = ref('aComponent');
const compList = ref({aComponent: markRaw(aComponent ),bComponent: markRaw(bComponent )
})
// 通过切换active的值来切换组件
const goDetail = (data: any) => {active.value = 'aComponent '
}
const back = () => {active.value = 'bcomponent '
}
</script>      

// Acomponent.vue (给组件加名字)

<script lang="ts" setup>
defineOptions({name: 'aComponent '
})
</script>
关键字:vue3中使用keepalive和component

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: