Vue动态组件绑定和v-once
如何实现一个组件的切换显示呢?
动态组件
前台控制两个组件使用v-if条件渲染,给一个按钮一个切换方法
<child-one v-if="type=='child-one'" v-once></child-one>
<child-two v-if="type=='child-two'" v-once></child-two>
<button @click="qiehuan">切换</button>定义两个组件以及这个vue实例的切换方法实现
Vue.component('child-one',{
template:`
<h3 >child-one</h3>
`
})
Vue.component('child-two',{
template:`
<h3>child-two</h3>
`
})
//Vue实例切换
var app=new Vue({
el:"#app",
data:{
type:"child-one"
},
methods:{
qiehuan:function(){
this.type=this.type=="child-one"?"child-two":"child-one"
}
}
})这样是不是有点麻烦?我们可以动态的显示?使用component组件绑定is
<component :is="type" ></component>直接这样调用就行!动态判断组件的显示
v-once
向上述就是那个符合条件显示在dom中,不符合的则直接在dom中销毁,这样是比较性能地下,如何正确的使用呢?可以加载一个v-once属性
<child-one v-if="type=='child-one'" v-once></child-one>
<child-two v-if="type=='child-two'" v-once></child-two>
<button @click="qiehuan">切换</button>这样处理静态资源比较好,第一次会进行加载并写入到内存中,下次使用的时候直接从内存取出就行,无需进行组件新建!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录