Vue 动态组件components和v-once指令的实现

一、实现两个组件间互相展示、互相隐藏

  
  


  

    
    
    change
  
  

页面效果图如下：

 

二、动态组件，简化页面代码

使用：父组件 dom标签使用 ，对组件名称进行绑定

 

    

     
    
    change
  

无论使用v-if还是components来使用动态组件的实现，都是在点击交互后，每一次页面效果的切换，会自动销毁前一个组件，再重新创建一个组件，页面则显示响应的内容， 这样的实现方式是比较消耗性能的

三、 v-show和v-once

使用v-show,则会只是隐藏在dom元素中，组件都会被创建。

在子组件中，加入v-once，当每次切换组件效果时，不再需要每次都经过创建-销毁的过程，而是在内存中直接取用上一次使用过的组件的内容

 Vue.component('child-one',{
    template:'
child-one
'
  })

  Vue.component('child-two',{
    template:'
child-two
'
  })

使用v-once,可以有效提高静态内容的展示效率，提高性能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。