# vue-dynamic-chg

> vue-dynamic-component

Latest version **0.0.15** (published 2019-11-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-dynamic-chg
pnpm add vue-dynamic-chg
yarn add vue-dynamic-chg
bun add vue-dynamic-chg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2019-11-19 |
| First published | 2019-11-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | summer_chg |

## Links

- npm: https://www.npmjs.com/package/vue-dynamic-chg
- Repository: https://github.com/Summer-CG/vue-dynamic-chg
- Homepage: https://github.com/Summer-CG/vue-dynamic-chg#readme
- Issues: https://github.com/Summer-CG/vue-dynamic-chg/issues
- npm.io page: https://npm.io/package/vue-dynamic-chg

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.10

## Recent versions

- 0.0.15 (latest) — 2019-11-19
- 0.0.13 — 2019-11-16
- 0.0.12 — 2019-11-16
- 0.0.11 — 2019-11-16
- 0.0.10 — 2019-11-16
- 0.0.9 — 2019-11-14
- 0.0.8 — 2019-11-14
- 0.0.7 — 2019-11-13
- 0.0.6 — 2019-11-12
- 0.0.4 — 2019-11-12
- 0.0.3 — 2019-11-12
- 0.0.2 — 2019-11-12
- 0.0.1 — 2019-11-12

## README

# vue-dynamic-chg

#### Description
vue-dynamic-component

#### Software Architecture
vue 

#### Installation

1.  npm i vue-dynamic-chg

#### Instructions

##### 如何使用？
 ```html
<div id="app">
  <dynamic :options="options" />
</div>
```

```javascript
import Dynamic from 'vue-dynamic-chg/components/Dynamic'
export default {
        components: { Dynamic },
        data() {
          return {
            options:{
                //   options配置  例如
                data:{},
                ...
                children:[],
            }
          }
        },
      }
```

##### options 数据配置：
```javascript
options: <dynamicItem>

// 单项 的组件配置
dynamicItem:{
    // 绑定配置项 
    data:function(){},  // 双向绑定数据
    lifecycle:{},   // 生命周期 继承 vue 生命提供的生命周期
    watch:{},       // 监听 绑定的数据
    computed:{},    // 计算函数
    methods:{},     // 函数方法
    components:{},   // 局部组件
   
    //基础配置项
    type:'',     // 组件名称，template 优先级 高于 type
    template:'',  //html 模板 字符串 最后通过 vue.compile 编译；注 这里需要使用包含 vue.compile 版本的 vue.js
    
    
    // 组件 信息（props、class、style...） 配置 绘画配置项
    // renderOptions  函数类型 返回一个 对象
    renderOptions(){
       // 这里同 vue 函数 createElement 的 数据对象 配置
       // 参考资料：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
    
       //示例 配置   
       return{
           'class':{},//Object|Function
       }
    }
    
    //特殊配置项：
    staticHtml:Function (createElement){},//类似 render(createElement)
    // 返回（return） vNode
    
    vIf:function(){}, // 判断当前节点是否显示
    
    vFor:function(){},
    // 返回（return） [vNode]
   
    // 子级 配置
    children:[
      dynamicItem 对象
    ]

}

```

##### tool库 提供函数
```
    1.formatComponent([Array],[Array]) 
    第一个参数 把配置 通过 children 连接起来，
    第二个参数 表示第一个参数最后一个 组件配置 的多个子级组件
    
    2.

```
##### this 指向

绑定配置项、特殊配置项、renderOptions函数的 this 都是指向当前 动态配置生成后的 组件


#### Gitee Feature

主要是用来通过数据动态生成组件；

一、特点：
1. 通过数据配置，动态生成。
2. 可继承父级配置，达到继承效果。
3. 灵活性强，接受 render函数 参数配置，提供生命周期，data双向数据，methods，compile，watch。
4. 接受html标签，全局组件（后期将会支撑局部组件） 动态生成。

二、缺点：
1. 配置项 比较复杂需要时间入手，配置根据组件嵌套层级而提高配置复杂度。
2. 配置内的 data双向数据，methods，compile，watch 都属于 vue-dynamic-chg 组件,导致不能明显知道具体数据结构，导致属性或方法重名被替换。

三、使用常见问题：
1. 注意查看配置项 里面的 this 指向问题。

四、使用场景：
1. 生成动态表单

---
_Source: https://npm.io/package/vue-dynamic-chg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._