文章目錄

• • Vue學(xué)習(xí)（動(dòng)態(tài)組件、組件路由緩存keepalive）-學(xué)習(xí)筆記
  • • 動(dòng)態(tài)組件
    • 組件路由緩存keepalive

Vue學(xué)習(xí)（動(dòng)態(tài)組件、組件路由緩存keepalive）-學(xué)習(xí)筆記

動(dòng)態(tài)組件

<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'"/> --><!-- 動(dòng)態(tài)組件 flag的值與組件的名稱(chēng)相匹配--><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'"/> --><!-- 動(dòng)態(tài)組件 flag的值與組件的名稱(chēng)相匹配--><!-- keep-alive 抽象組件 用于對(duì)組件進(jìn)行緩存 --><!-- include:只有匹配的組件才會(huì)緩存 （可寫(xiě)正則表達(dá)式） --><!-- exclude:任何組件不會(huì)緩存 --><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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。