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如何循环提取对象数组中的值
Nov 18 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
实用函数7
2007/11/08 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python对html过滤处理的方法
2018/10/21 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
django框架ModelForm组件用法详解
2019/12/11 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
木工主管岗位职责
2013/12/08 职场文书
活动策划求职信模板
2014/04/21 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
私人委托书格式
2014/09/10 职场文书
2014年政工师工作总结
2014/12/18 职场文书
武夷山导游词
2015/02/03 职场文书
爱晚亭导游词
2015/02/09 职场文书
复活读书笔记
2015/06/29 职场文书
2016年春节问候语
2015/11/11 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js