Vue动态组件component的深度使用说明

背景介绍

最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件。

组件封装

首先想到的就是Form组件,在Element UI提供的Form中,我们需要一个一个的去添加对用的FormItem


  
    
  
  
    
      
      
    
  

可以发现,每个FormItem的结构都是一样的,只是其中包含的组件不一样。这样,我们就可以通过封装组件的方式,将代码简化,


  
  

**my-form-item.vue **0.1版如下

  
    
      
    
    
  

0.1版,直接使用了v-if来处理widget类型,此时,input和select的逻辑耦合在了一起,再需要其他的组件类型时,这个文件结构会很复杂。

Vue动态组件

在Vue中,提供了动态组件component,它可以在动态的选择加载那个组件。

例子:


每次切换都是生成新的组件,如果用keep-alive包裹,就可以提高性能,前提是大项目!相对提升性能。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(Vue动态组件component的深度使用说明)