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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 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 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python调试神器PySnooper的使用
2019/07/03 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
linux面试题参考答案(9)
2015/01/07 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
汉语专业应届生求职信
2013/10/01 职场文书
村委会贫困证明
2014/01/14 职场文书
宣传工作经验材料
2014/06/02 职场文书
社区两委对照检查材料
2014/08/23 职场文书
万能检讨书
2015/01/27 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
亮剑精神观后感
2015/06/05 职场文书