6.5.7Vue组件深入理解--动态组件与v-once指令
动态组件实现点击按钮,两个组件交替显示1.可以用v-if指令实现:<body><div id="app"><child-one v-if="type==='child-one'"></child-one><child-two v-if="type==='child-two'"></child-two>...
·
动态组件
实现点击按钮,两个组件交替显示
1.可以用v-if指令实现:
<body>
<div id="app">
<child-one v-if="type==='child-one'"></child-one>
<child-two v-if="type==='child-two'"></child-two>
<button @click="btnClick">change</button>
</div>
<script>
Vue.component('child-one',{
template: '<div>Child-one</div>',
})
Vue.component('child-two',{
template: '<div>Child-two</div>',
})
var vm = new Vue({
el: '#app',
data: {
type: "child-one"
},
methods: {
btnClick: function(){
this.type=this.type==="child-one"?"child-two":"child-one";
}
}
})
</script>
</body>
2.还可以使用动态组件的形式:
component:Vue自带的标签,就表示一个动态组件
<body>
<div id="app">
<component :is="type"></component><!--动态组件有一个is属性,他会根据is属性里面的数据变化,自动的加载不同的组件-->
<button @click="btnClick">change</button>
</div>
<script>
//同上
</script>
</body>
v-once指令
如上文的v-if实现组件的交替显示时,每次显示隐藏都要重新创建/销毁组件,非常耗费性能。v-once的作用就是,当前组件渲染到页面上时直接放到内存中,下次需要的时候,不需要重新创建,直接在内存中拿。提高了性能,提高了一些静态内容的展示效率
Vue.component('child-one',{
template: '<div v-once>Child-one</div>',
})
Vue.component('child-two',{
template: '<div v-once>Child-two</div>',
})
更多推荐
已为社区贡献1条内容
所有评论(0)