Flask接口签名sign原理与实例代码浅析
321
2023-04-17
Vue动态组件实例解析
前面的话
让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍vue动态组件
概述
通过使用保留的
var home = {template:'
var post = {template:'
var archive = {template:'
new Vue({
el: '#example',
components: {
home,
post,
archive,
},
data:{
index:0,
arr:['home','post','archive'],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
也可以直接绑定到组件对象上
new Vue({
el: '#example',
data:{
index:0,
arr:[
{template:`
{template:`
{template:`
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
缓存
【基础用法】
new Vue({
el: '#example',
data:{
index:0,
arr:[
{template:`
{template:`
{template:`
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
let len = this.arr.length;
this.index = (++this.index)% len;
}
}
})
【条件判断】
如果有多个条件性的子元素,
new Vue({
el: '#example',
components:{
home:{template:`
posts:{template:`
archive:{template:`
},
data:{
index:0,
},
methods:{
change(){
let len = Object.keys(this.$options.components).length;
this.index = (++this.index)%len;
}
}
})
【activated 和 deactivated】
activated 和 deactivated 在
{{msg}}
new Vue({
el: '#example',
data:{
index:0,
msg:'',
arr:[
{
template:`
activated(){
this.$emit('pass-data','主页被添加');
},
deactivated(){
this.$emit('pass-data','主页被移除');
},
},
{template:`
{template:`
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
var len = this.arr.length;
this.index = (++this.index)% len;
},
getData(value){
this.msg = value;
setTimeout(()=>{
this.msg = '';
},500)
}
}
})
【include和exclude】
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配
上面的代码,表示只缓存home和archive,不缓存posts
new Vue({
el: '#example',
data:{
index:0,
arr:[
{name:'home',template:`
{name:'posts',template:`
{name:'archive',template:`
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
var len = this.arr.length;
this.index = (++this.index)% len;
},
}
})
总结
以上所述是给大家介绍的Vue动态组件实例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,会及时回复大家的!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~