基于IView的二次封装以及render构建低代码平台

• 了解需求

这次遇到的场景是用于开发低代码平台的开发，组件库的搭建，为了保证组件灵活以及扩展属性的多面性，动态可创建性，减少v-if 等的使用消耗，使其更加灵活与方便，本次选用render方法对组件进行一个构建封装，使其进行存库处理

• render

官网解释:

我们看到render（生命周期在created前面）是通过createElement动态模板字符串的方法来动态生成Vnode(虚拟DOM),这里就不解释虚拟DOM了，有兴趣的可以去看看，我们直接上语法

• createElement

官网给我的解释：

第一个参数为：String: 标签名称， 第二个参数为: Object: 属性配置， 第三个参数： Array: 子节点数组集合（h => ()）

例如：

<h1>{{ blogTitle }}</h1>

等价于：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

属性配置：官网（cn.vuejs.org/v2/guide/re…）

OK基本上这些就ok了，让我们来看一下具体的使用：

项目中的使用：

目的：对Iview的二次封装

文件目录：

acc-input/index.js:

这里使用了混合方式，组件的传参字段固定，将其提取了出来：
mixins/components/index.js:

ps: 解释下，vm.$attrs为继承父组件的属性(attribute)，vm.$listeners继承父组件的方法(v-on)，作为组件的传递与继承：

这样一个简单的基于Iview的Input输入框就好啦，最后我们需要动态注入：
components/index.js

这样我们就可以直接在任何地方使用我们的组件了：

useComponents:

<AccInput v-model='value' :attrs='attrs'> </AccInput>

attrs: { 
    value: '12334',
     props: {                        
     placeholder: '请输入内容',
     type: 'text' },
     directives: [ 
         {  
            name: 'width',  
            value: 800     
          }, 
          {  
            name: 'height', 
            value: 40    
           }  
        ],  
     listeners: {  
          'on-change': (event) => {}
            }, 
       class: { 
            active: true 
            }, 
      slot: {                        
          name: 'prepend',                        
      style: {                            
          width: '95px'                       
          }                    
      }               
 },

大体就是这样，欢迎各位进行指点，持续学习中......