vue 动态组件和 keep-alive
2021/9/12 23:07:10
本文主要是介绍vue 动态组件和 keep-alive,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
=> 通过 commponent 创建动态组件
:is 属性判断加载的组件 ,通过 keep-alive 实现组件内的数据被缓存 <template> keep-alive component(:is="who") // 通过 @click="who='home'" 判断加载的组件 ul li(@click="who='home'") 首页 li(@click="who='list'") 列表页 li(@click="who='cart'") 购物车页面 </template>
引入组件
<script> import home from "./keep-alive/alive.vue" import list from "./keep-alive/index.vue" import cart from "./keep-alive/keep-alive.vue" export default { components: { home, list, cart }, data() { return { who: 'home' } } } </script>
这篇关于vue 动态组件和 keep-alive的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南