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 21 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue3中provide && inject的使用
Jul 01 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
pytorch 常用线性函数详解
2020/01/15 Python
python怎么对数字进行过滤
2020/07/05 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
个性大学生自我评价
2013/12/04 职场文书
土木工程求职信
2014/05/29 职场文书
政府法律服务方案
2014/06/14 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
黄河绝恋观后感
2015/06/08 职场文书
python执行js代码的方法
2021/05/13 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Golang数据类型和相互转换
2022/04/12 Golang