文章目錄

• • Vue學習（動態組件、組件路由緩存keepalive）-學習筆記
  • • 動態組件
    • 組件路由緩存keepalive

Vue學習（動態組件、組件路由緩存keepalive）-學習筆記

動態組件

<template> <div><button @click="flag='testA'">testA</button><button @click="flag='testB'">testB</button><button @click="flag='testC'">testC</button><!-- <testA v-if="flag=='testA'"/><testB v-if="flag=='testB'"/> --><!-- 動態組件 flag的值與組件的名稱相匹配--><component :is="flag"></component> </div> </template><script> import testA from './testA.vue' import testB from './testB.vue'export default {name:'',data(){return{flag:'testA'}},components:{testA,testB} } </script>

組件路由緩存keepalive

<template> <div><button @click="flag='testA'" :class="flag=='testA'?'active':''">testA</button><button @click="flag='testB'" :class="flag=='testB'?'active':''">testB</button><button @click="flag='testC'" :class="flag=='testC'?'active':''">testC</button><!-- <testA v-if="flag=='testA'"/><testB v-if="flag=='testB'"/> --><!-- 動態組件 flag的值與組件的名稱相匹配--><!-- keep-alive 抽象組件 用于對組件進行緩存 --><!-- include:只有匹配的組件才會緩存 （可寫正則表達式） --><!-- exclude:任何組件不會緩存 --><keep-alive include="testA"><component :is="flag"></component></keep-alive><!-- 組件testA、testC緩存 --><!-- <keep-alive include="testA,testC"><component :is="flag"></component></keep-alive>--><!-- 除了組件testA、testC緩存 --><!-- <keep-alive exclude="testA,testC"><component :is="flag"></component></keep-alive>--> </div> </template><script> import testA from './testA.vue' import testB from './testB.vue'export default {name:'',data(){return{flag:'testA'}},components:{testA,testB} } </script><style scoped> @import '../../assets/css/table.css'; .active {background:#f00; } </style> <template> <div>testA組件：{{title}} </div> </template><script> export default {name:'',data(){return{title:Math.random()}} } </script> <template> <div>testB組件：<input type="text" v-model="title" /> </div> </template><script> export default {name:'',data(){return{title:Math.random()}} } </script>

總結

以上是生活随笔為你收集整理的Vue学习（动态组件、组件路由缓存keepalive）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。