vue动态生成自定义组件,vue创建组件的三种方式

　　这篇文章主要介绍了某视频剪辑软件动态创建组件的两种方法，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下

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

方式一

　　从“vue”导入某视频剪辑软件

　　/**

　　* @param组件组件实例的选项对象

　　* @param道具组件实例中的支柱

　　*/

　　导出功能创建（组件、道具){

　　const comp=new(vue。extend(Component))({ props data:props })。$mount()

　　document.body.appendChild(comp .$el)

　　comp.remove=()={

　　document.body.removeChild(comp .$el)

　　比较. destroy()

　　}

　　退货补偿

　　}

方式二

　　从“vue”导入某视频剪辑软件

　　导出功能创建（组件、道具){

　　//借鸡生蛋新Vue({render() {}})，在提出中把成分作为根组件

　　const vm=new Vue({

　　//h是标签名函数，它可以返回虚拟数字正射影像图

　　渲染(h) {

　　console.log(h(Component，{ props })；

　　//将成分作为根组件渲染出来

　　//h(标签名称或组件配置对象，传递属性、事件等，孩子元素)

　　返回h(组件，{道具})

　　}

　　}).$mount() //挂载是为了把虚拟数字正射影像图变成真实数字正射影像图

　　//不挂载就没有真实数字正射影像图

　　//手动追加至身体

　　//挂载之后$el可以访问到真实数字正射影像图

　　document.body.appendChild(vm .$el)

　　console.log(vm .$儿童);

　　//实例

　　常数comp=vm .$儿童[0]

　　//淘汰机制

　　comp.remove=()={

　　//删除数字正射影像图

　　document.body.removeChild(vm .$el)

　　//销毁组件

　　虚拟机.$destroy()

　　}

　　//返回成分组件实例

　　退货补偿

　　}

使用

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

　　模板

　　div class=a

　　h2{{ title }}/h2

　　p{{ data }}/p

　　/div

　　/模板

　　脚本

　　导出默认值{

　　道具：{

　　标题：{

　　类型：字符串，

　　默认："你好，世界!"

　　},

　　消息：{

　　类型：字符串，

　　默认： o(_)o哈哈

　　},

　　持续时间：{

　　类型：数量，

　　默认值：1000

　　}

　　},

　　data() {

　　返回{

　　数据： 我是a组件，

　　};

　　},

　　已创建(){

　　设数量=1

　　const timer=setInterval(()={

　　this.data=数字

　　}，this.duration)

　　这个$once(hook: beforeDestroy ，()=clearInterval(timer))

　　}

　　};

　　/脚本

　　风格。一个{

　　位置：固定；

　　宽度：100%;

　　top:16px；

　　左：0;

　　文本对齐：居中；

　　指针事件：无；

　　背景色：# fff

　　边框：灰色3px纯色；

　　框大小：边框-框；

　　}

　　/风格

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

　　模板

　　div class=b

　　button @click=createA 创建/按钮

　　/div

　　/模板

　　脚本

　　从@/组件/A.vue 导入A

　　从" @/utils/create.js "导入{创建}

　　导出默认值{

　　组件：{

　　一，

　　},

　　方法：{

　　createA() {

　　//创建A组件，并挂载到身体上

　　创建(一、{标题： vue ，消息： 么么哒 })

　　}

　　},

　　};

　　/脚本

　　以上就是某视频剪辑软件动态创建组件的两种方法的详细内容，更多关于某视频剪辑软件动态创建组件的资料请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。