<div id="example">
button @click="change">切换页面</buttoncomponent :is="currentView"></component>
div>
script>
var home = {template:'<div>我是主页</div>};
post <div>我是提交页</div> archive <div>我是存档页</div>new Vue({
el: #example,components: {
home,post,archive,},data:{
index:0homepostarchive],computed:{
currentView(){
return this.arr[.index];
}
},methods:{
change(){
.index (++.index)%3;
}
}
})
>
home v-if="index===0"homeposts v-else-if="index===1"postsarchive v-elsearchive<div>我是主页/div>`},
posts:{template:`我是提交页 archive:{template:`我是存档页 },methods:{
change(){
let len Object.keys(.$options.components).length;
len;
}
}
})
>
="currentView" @pass-data="getData">
p>{{msg}}''div>`,1)"> activated(){
.$emit(pass-data主页被添加);
},deactivated(){
主页被移除 {template:`div>`}
],1)"> len = .arr.length;
len;
},getData(value){
.msg value;
setTimeout(()=>{
;
},1)">500)
}
}
})
>
<!-- 逗号分隔字符串 -->
keep-alive include="a,b"="view" 正则表达式 (使用 v-bind) :include="/a|b/" Array (use v-bind) ="['a','b']">
asyncComponents(templateName){
this.curNavComponents = require(`./components/${templateName}.vue`).default;
}
服务热线 19970861797
