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的异步更新实现原理
Dec 22 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue Element plus使用方法梳理
Dec 24 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学习笔记之一
2011/01/17 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python 用下标截取字符串的实例
2018/12/25 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
一套SQL笔试题
2016/08/14 面试题
大学班级计划书
2014/04/29 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
基于Python实现nc批量转tif格式
2022/08/14 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript