<代码> & lt; keep-alive> & lt; transition> & lt; keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。
& lt; div id=癳xample"比;
,& lt; button @click=癱hange"在切换页面& lt;/button>
,& lt; keep-alive>
& lt;才能component :=癱urrentView"祝辞& lt;/component>,
,& lt;/keep-alive>
& lt;/div> <强>条件判断
如果有多个条件性的子元素,<代码> & lt; keep-alive> & lt; div id=癳xample"比;
,& lt; button @click=癱hange"在切换页面& lt;/button>
,& lt; keep-alive>
& lt;才能home v=爸甘?==0“祝辞& lt;/home>
& lt;才能posts v-else-if=爸甘?==1“祝辞& lt;/posts>
& lt;才能archive v-else> & lt;/archive>,
,& lt;/keep-alive>
& lt;/div>
& lt; script>
Vue ({new
,el: & # 39; #示例# 39;
,组件:{
回家才能:{模板:“& lt; div>我是主页& lt;/div> "},
文章才能:{模板:“& lt; div>我是提交页& lt;/div> "},
档案才能:{模板:“& lt; div>我是存档页& lt;/div> "},
},
,数据:{
指数:0,才能
},
,方法:{
改变才能(){
,,let len =,种(这一点。options.components美元). length;
,,this.index =, (+ + this.index) % len;
,,}
,}
})
& lt;/script> <强>激活和停用
激活和停用在& lt; keep-alive>树内的所有嵌套组件中触发:
& lt; div id=癳xample"比;
,& lt; button @click=癱hange"在切换页面& lt;/button>
,& lt; keep-alive>
& lt;才能component :=癱urrentView", @pass-data=癵etData"祝辞& lt;/component>,
,& lt;/keep-alive>
,& lt; p>{{味精}}& lt;/p>
& lt;/div>
& lt; script>
Vue ({new
,el: & # 39; #示例# 39;
,数据:{
指数:0,才能
味精:才能& # 39;& # 39;,,,
加勒比海盗:[才能
,,,{
,,,模板:“& lt; div>我是主页& lt;/div>”,
,,,激活(){
,,,,,美元发出(& # 39;pass-data& # 39; & # 39;主页被添加& # 39;);
,,,},
,,,停用(){
,,,,,美元发出(& # 39;pass-data& # 39; & # 39;主页被移除& # 39;);
,,,},,,,,
,,},
,,{模板:“& lt; div>我是提交页& lt;/div> "},
,,{模板:“& lt; div>我是存档页& lt;/div> '}
,,,
},
,计算:{
currentView才能(){
,,,return this.arr [this.index];
,,}
},
,方法:{
改变才能(){
,,var len =, this.arr.length;
,,this.index =, (+ + this.index) %, len;
,,},
getData(值){才能
,,this.msg =,价值;
,,setTimeout(()=祝辞{
,,,this.msg =, & # 39; & # 39;;
,,},500)
,,}
,}
})
& lt;/script>
