vue 动态组件和 keep-alive

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！