Vue动态组件 v-once指令

方法一
<component :is="type"></component>
<button @click="change">change</button>

　　

 

方法二

<child-one v-if="type==='child-one'"></child-one>
<child-two v-if="type==='child-two'"></child-two>
<button @click="change">change</button>

 

Vue.component("child-one",{
                
                template:`<div v-once>child-one</div>`,
            })
            
Vue.component("child-two",{
                
                template:`<div v-once>child-two</div>`,
            })
            //v-once把组件放到缓存里提高工作效率

var app =new Vue({

el:"#app",

data:{
type:'child-one'
},
methods:{
change:function(){

this.type = (this.type==='child-one' ? 'child-two':'child-one'),


}
}

})

 

转载于:https://www.cnblogs.com/yubaibai/p/10713822.html