Vue动态表单---Variant Form代码学习（Vue内置组件）

一、动态表单

• 首先找到表单部分
  
• 找到遍历动态组件的重点
  

二、动态组件component标签

Props：
is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean
用法：
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<component :is="componentId">component>


<component :is="$options.components.child">component>

三、transition组件

元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

四、transition-group组件

元素作为多个元素/组件的过渡效果。 渲染一个真实的DOM元素。默认渲染 ，可以通过 tag attribute 配置哪个元素应该被渲染。
注意，每个 的子节点必须有独立的 key，动画才能正常工作

<transition-group name="fade" tag="div" class="form-widget-list">
          <template v-for="(widget, index) in designer.widgetList">
          
            <template v-if="'container' === widget.category">
              <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
                                :index-of-parent-list="index" :parent-widget="null">component>
            template>
            
            <template v-else>
              <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
                            :index-of-parent-list="index" :parent-widget="null" :design-state="true">component>
            template>
          template>
        transition-group>

三、引用表单组件

• 引用的index.js

// 从当前目录下加载所有.vue后缀的组件
const requireComponent = require.context('./', false, /\w+\.vue$/)

let comps = {}
// 遍历requireComponent对象，构建components键值
requireComponent.keys().map(fileName => {
  let comp = requireComponent(fileName).default;
  comps[comp.name] = comp
})

export default comps;

require.context(directory, useSubdirectories, regExp, mode = ‘sync’)

• directory:表示检索的目录
• useSubdirectories：表示是否检索子文件夹
• regExp:匹配文件的正则表达式,一般是文件名
• mode:加载模式，同步/异步
  用来在组件内引入多个组件

四、最后

通过一个数组字符串就能遍历不同的组件了

 <component :is="'input-widget'">
 component>

• is对应的值为上面解析到的组件key
  

ok，就到这里\(^o^)/~