# vue动态插入自定义组件

**Repository Path**: web_io/vue-js-dynamic-components

## Basic Information

- **Project Name**: vue动态插入自定义组件
- **Description**: vue项目当中实现dom动态插入自定义组件的npm包
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/js-dynamic-components?activeTab=readme
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-17
- **Last Updated**: 2024-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 安装本项目
```
npm i js-dynamic-components
```

## 项目说明

“js-dynamic-components”在Vue项目开发实现动态插入自定义组件，基于vue2的extend方法实现，实现对vue自定义组件动态管理操作，只需要一个方法，传入对应的参数即可实现自定义组件的动态管理。
使用“js-dynamic-components”可以实现自定义组件的动态管理，实现对自定义组件的动态插入，动态删除，动态更新，动态获取，动态修改，动态销毁等操作。

## 使用本项目
```js
// 在您的vue组件当中导入npm包
import {Dynamically_insert_components} from 'js-dynamic-components'
// 使用本项目 示例如下 直接调用该方法
Dynamically_insert_components(Assembly,Tvalue,Id)
```
## 示例
```js
// 例如 自注册，或者全局注册的自定义组件
import com2 from './Home'
export default {
    components: {
        com2
    },
    data() {
        return {
            data:'数据传值测试1'
        };
    },
    mounted() {
        this.ss()
    },
    methods: {
        ss(){
            Dynamically_insert_components(com1,this.data,"a1")
        }
    },
};
```

## 参数说明
|  参数| 参数说明 |
|--|--|
| 注意 | 使用js-dynamic-components前，需要对自己开发项目进行一次npm i初始化操作（因为基于vue的extend方法实现，需要还原安装vue） |
| Assembly | 自定义组件名称，导入即可 |
| Tvalue | props传值 ,字符串，数组，对象都可以，子组件props传值参数Transfer_data |
| Id | 需要添加vue自定义组件的DOM的id，字符串传入，"id"|