Vue基于extend方法实现动态插入自定义组件以及组件props传值，“js-dynamic-components”。

一、应用场景

在很多时候，开发vue项目需要对我们自己开发的自定义组件进行动态的控制，以实现按照我们想要的组件去进行渲染，同时可以动态的管理操作前端的自定义组件渲染显示。
那么如何实现？

二、具体实现

1、原理

Vue.extend()：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
简单来说，我们可以通过Vue.extend()方法在template模板中去凭空创造一个组件，效果类似于JQuery或者es6（js）当中添加生成DOM元素。

2、实现

var tipComponent = Vue.extend({
    
    
    render: (h) =>
      h(Assembly, {
    
    
        props: {
    
    
          Transfer_data:Tvalue
        }, //组件传值
      }),
  }); //生成组件的dom
  const component = new tipComponent().$mount();
  var DomContent = component.$el; //将vue结构转化成dom
  document.getElementById(Id).appendChild(DomContent);

三、封装使用

1、安装本项目

npm i js-dynamic-components

2、使用本项目

// 在您的vue组件当中导入npm包
import {
    
    Dynamically_insert_components} from 'js-dynamic-components'
// 使用本项目 示例如下 直接调用该方法
Dynamically_insert_components(Assembly,Tvalue,Id)

3、示例

// 例如 自注册，或者全局注册的自定义组件
import com2 from './Home'
export default {
    
    
    components: {
    
    
        com2
    },
    data() {
    
    
        return {
    
    
            data:'数据传值测试1'
        };
    },
    mounted() {
    
    
        this.ss()
    },
    methods: {
    
    
        ss(){
    
    
            Dynamically_insert_components(com1,this.data,"a1")
        }
    },
};

4、参数说明

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

本文原创，原创不易，如需转载，请联系作者授权。