vue 动态创建组件的两种方法


Posted in Vue.js onDecember 31, 2020

Vue动态创建组件实例并挂载到body

方式一

import Vue from 'vue'

/**
 * @param Component 组件实例的选项对象
 * @param props 组件实例中的prop
 */
export function create(Component, props) {
 const comp = new (Vue.extend(Component))({ propsData: props }).$mount()
 
 document.body.appendChild(comp.$el)

 comp.remove = () => {
  document.body.removeChild(comp.$el)

  comp.$destroy()
 }

 return comp
}

方式二

import Vue from 'vue'

export function create(Component, props) {
 // 借鸡生蛋new Vue({render() {}}),在render中把Component作为根组件
 const vm = new Vue({
  // h是createElement函数,它可以返回虚拟dom
  render(h) {
   console.log(h(Component,{ props }));
   
   // 将Component作为根组件渲染出来
   // h(标签名称或组件配置对象,传递属性、事件等,孩子元素)
   return h(Component, { props })
  }
 }).$mount() // 挂载是为了把虚拟dom变成真实dom
 // 不挂载就没有真实dom
 // 手动追加至body
 // 挂载之后$el可以访问到真实dom
 document.body.appendChild(vm.$el)

 console.log(vm.$children);
 
 // 实例
 const comp = vm.$children[0]

 // 淘汰机制
 comp.remove = () => {
  // 删除dom
  document.body.removeChild(vm.$el)

  // 销毁组件
  vm.$destroy()
 }

 // 返回Component组件实例
 return comp
}

使用

A组件(要动态创建的组件)

<template>
 <div class="a">
  <h2>{{ title }}</h2>
  <p>{{ data }}</p>
 </div>
</template>

<script>
export default {
 props: {
  title: {
   type: String,
   default: "hello world!"
  },
  message: {
   type: String,
   default: "o(∩_∩)o 哈哈"
  },
  duration: {
   type: Number,
   default: 1000
  }
 },
 data() {
  return {
   data: "我是a组件",
  };
 },
 created() {
  let num = 1
  
  const timer = setInterval(() => {
   this.data = num++
  }, this.duration)

  this.$once("hook: beforeDestroy", () => clearInterval(timer))
 }
};
</script>

<style>
.a {
 position: fixed;
 width: 100%;
 top: 16px;
 left: 0;
 text-align: center;
 pointer-events: none;
 background-color: #fff;
 border: grey 3px solid;
 box-sizing: border-box;
}
</style>

B组件(操作动态创建组件的地方)

<template>
 <div class="b">
  <button @click="createA">创建</button>
 </div>
</template>

<script>
import A from "@/components/A.vue"
import { create } from "@/utils/create.js"
export default {

 components: {
  A,
 },
 methods: {
  createA() {
   // 创建A组件,并挂载到body上
   create(A, { title: "vue", message: "么么哒?" })
  }
 },
};
</script>

vue 动态创建组件的两种方法

以上就是vue 动态创建组件的两种方法的详细内容,更多关于vue 动态创建组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 #Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
You might like
生成静态页面的PHP类
2006/07/15 PHP
php类
2006/11/27 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
htm调用JS代码
2007/03/15 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
幼儿园见习报告
2014/10/30 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Django实现翻页的示例代码
2021/05/24 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Java实现房屋出租系统详解
2021/10/05 Java/Android