下面讲一下如何定义动态组件。

 Vue.extend

 思路就是拿到组件的构造函数，这样我们就可以new了。而Vue.extend可以做到：https://cn.vuejs.org/v2/api/#Vue-extend

// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
 return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
 }
 }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

官方提供了这个示例，我们进行一下改造，做一个简单的消息提示框。

动态组件实现

创建一个vue文件。widgets/alert/src/main.vue

<template>
 <transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
 </transition>
</template>
<script >
 export default{
  data(){
   return{
    message:'',
    visible:true
   } 
  },
  methods:{
   close(){
    setTimeout(()=>{
      this.visible = false;
    },2000)
   },
  },
  mounted() {
  this.close();
  }
 }
</script>

这是我们组件的构成。如果是第一节中，我们可以把他放到components对象中就可以用了，但是这儿我们要通过构造函数去创建它。再创建一个widgets/alert/src/main.js

import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue'));
let instance;
var MyMsg=function(msg){
 instance= new MyMsgConstructor({
  data:{
   message:msg
}})
//如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
instance.$mount();
 document.body.appendChild(instance.$el)
 return instance;
}
export default MyMsg;
require('./main.vue')返回的是一个组件初始对象，对应Vue.extend( options )中的options，这个地方等价于下面的代码：
import alert from './main.vue'
let MyMsgConstructor = Vue.extend(alert);

而MyMsgConstructor如下。

 参考源码中的this._init,会对参数进行合并，再按照生命周期运行：

 Vue.prototype._init = function (options) {
 ...// merge options
 if (options && options._isComponent) {
  // optimize internal component instantiation
  // since dynamic options merging is pretty slow, and none of the
  // internal component options needs special treatment.
  initInternalComponent(vm, options);
 } else {
  vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
  options || {},
  vm
  );
 }
// expose real self
 vm._self = vm;
 initLifecycle(vm);
 initEvents(vm);
 initRender(vm);
 callHook(vm, 'beforeCreate');
 initInjections(vm); // resolve injections before data/props
 initState(vm);
 initProvide(vm); // resolve provide after data/props
 callHook(vm, 'created');
 ...
 if (vm.$options.el) {
  vm.$mount(vm.$options.el);
 }
 };

而调用$mount()是为了获得一个挂载实例。这个示例就是instance.$el。

可以在构造方法中传入el对象(注意上面源码中的mark部分，也是进行了挂载vm.$mount(vm.$options.el)，但是如果你没有传入el，new之后不会有$el对象的，就需要手动调用$mount()。这个方法可以直接传入元素id。

instance= new MessageConstructor({
  el:".leftlist",
  data:{
   message:msg
}})

 这个el不能直接写在vue文件中，会报错。接下来我们可以简单粗暴的将其设置为Vue对象。

调用

在main.js引入我们的组件：

//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;

然后在页面上测试一下：

<el-button type="primary" @click='test'>主要按钮</el-button>
//..
　methods:{
 test(){
 this.$mymsg("hello vue");
 }
 }

这样就实现了基本的传参。最好是在close方法中移除元素：

close(){
 setTimeout(()=>{
  this.visible = false;
  this.$el.parentNode.removeChild(this.$el);
  },2000)
 },

 回调处理

回调和传参大同小异，可以直接在构造函数中传入。先修改下main.vue中的close方法：

export default{
  data(){
   return{
    message:'',
    visible:true
   } 
  },
  methods:{
   close(){
    setTimeout(()=>{
      this.visible = false;
      this.$el.parentNode.removeChild(this.$el);
    if (typeof this.onClose === 'function') {
     this.onClose(this);
    }
    },2000)
   },
  },
  mounted() {
  this.close();
  }
 }

如果存在onClose方法就执行这个回调。而在初始状态并没有这个方法。然后在main.js中可以传入

var MyMsg=function(msg,callback){
 instance= new MyMsgConstructor({
  data:{
   message:msg
 },
 methods:{
  onClose:callback
 } 
})

这里的参数和原始参数是合并的关系，而不是覆盖。这个时候再调用的地方修改下，就可以执行回调了。

 test(){
  this.$mymsg("hello vue",()=>{
  console.log("closed..")
  });
 },

你可以直接重写close方法，但这样不推荐，因为可能搞乱之前的逻辑且可能存在重复的编码。现在就灵活多了。

统一管理

 如果随着自定义动态组件的增加，在main.js中逐个添加就显得很繁琐。所以这里我们可以让widgets提供一个统一的出口，日后也方便复用。在widgets下新建一个index.js

import MyMsg from './alert/src/main.js';
const components = [MyMsg];
let install =function(Vue){
 components.map(component => {
 Vue.component(component.name, component);
 });
 Vue.prototype.$mymsg = MyMsg;
}
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
};
export default {
 install
}

在这里将所有自定义的组件通过Vue.component注册。最后export一个install方法就可以了。因为接下来要使用Vue.use。

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

也就是把所有的组件当插件提供：在main.js中加入下面的代码即可。

...
import VueResource from 'vue-resource'
import Widgets from './Widgets/index.js'

...
Vue.use(Widgets)

这样就很简洁了。

小结： 通过Vue.extend和Vue.use的使用，我们自定义的组件更具有灵活性，而且结构很简明，基于此我们可以构建自己的UI库。以上来自于对Element源码的学习。

widgets部分源码：http://files.cnblogs.com/files/stoneniqiu/widgets.zip

以上所述是小编给大家介绍的vue2 自定义动态组件所遇到的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue  # 自定义  # 动态组件  # vue2  # 自定义组件  # vue中设置height:100%无效的问题及解决方法  # vue中常见的问题及解决方法总结（推荐）  # 解决vue的component标签渲染问题  # vue 动态组件component  # vue.js动态设置VueComponent高度遇到的问题及解决  # 我们可以  # 回调  # 是一个  # 就可以  # 可以直接  # 小编  # 自己的  # 的是  # 这是  # 是在  # 在这里  # 会有  # 你可以  # 在此  # 而在  # 把他  # 将其  # 用了  # 给大家 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  做企业网站制作流程,企业网站制作基本流程有哪些？  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  零基础网站服务器架设实战：轻量应用与域名解析配置指南  如何在万网利用已有域名快速建站？  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  如何快速建站并高效导出源代码？  网站优化排名时，需要考虑哪些问题呢？  如何快速上传建站程序避免常见错误？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  进行网站优化必须要坚持的四大原则  如何用西部建站助手快速创建专业网站？  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  javascript如何操作浏览器历史记录_怎样实现无刷新导航  微信小程序 scroll-view组件实现列表页实例代码  如何为不同团队 ID 动态生成多个“认领值班”按钮  Laravel PHP版本要求一览_Laravel各版本环境要求对照  如何确认建站备案号应放置的具体位置？  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  如何获取上海专业网站定制建站电话？  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  网站制作软件有哪些,制图软件有哪些？  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  5种Android数据存储方式汇总  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  IOS倒计时设置UIButton标题title的抖动问题  浅谈javascript alert和confirm的美化  PythonWeb开发入门教程_Flask快速构建Web应用  成都网站制作公司哪家好,四川省职工服务网是做什么用？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  文字头像制作网站推荐软件,醒图能自动配文字吗？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  教你用AI将一段旋律扩展成一首完整的曲子  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  如何在阿里云高效完成企业建站全流程？  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  教你用AI润色文章，让你的文字表达更专业  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程