Vue_动态组件与v-once指令

一.component动态组件
动态组件是根据判断值决定是否显示该组件<component> 根据is的值来显示相应的组件是否应该显示

使用的方法:

<component :is='changeConponents'></component>
<button @click="changeclick">change</button>

默认显示tablerow组件:

changeConponents:'tablerow',

change按钮可以切换显示组件:

changeclick:function(){
   this.changeConponents =   this.changeConponents==='tablerow'?'counter':'tablerow'
},

二.v-once:

如果每一次组件的内容都一样,我们可以在组件上用v-once指令,

当这个组件在第一次被渲染的时候,因为组件上有v-once指令,所以会直接放在内存当中,当我们重复的切换组件的时候,就不需要摧毁重建了,而是从内存里直接取出组件,提高了性能。

所以在Vue当中,使用v-once可以提高一些静态内容的展示效率

猜你喜欢

转载自blog.csdn.net/hani_wen/article/details/80805496
今日推荐