Vue中通过Vue.extend动态创建实例的方法

在Vue中，如果我们想要动态地来控制一个组件的显示和隐藏，比如通过点击按钮显示一个对话框或者弹出一条信息。我们通常会提前写好这个组件，然后通过v-if = “show”来控制它的显示隐藏。如下所示：

 <div>
    <button @click = "show = !show">弹出</button>
    <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>
  </div>

另外还有一种实现方法就是通过Vue.extend来动态地创建实例，在想要进行显示的时候创建实例。

在需要隐藏的时候删除这个实例。

1.通过Vue.extend创建构造器,这个构造器用于需要显示是创建实例。

const Constructor = Vue.extend({
  template:` <span>{{message}}</span> `,
  data(){
    return {
      message:'这是一条通过按钮控制显示隐藏的信息'
    }
  }
})
1.需要显示时创建实例
showHandle(){
  const MessageCom = this.MessageCom = new Constructor({
    propsData:{
      show:true
    }
  }).$mount();

  this.$refs.message.appendChild(MessageCom.$el);
}
1.需要隐藏时删除实例
hiddenHandle(){
  this.MessageCom.$el.remove()
  this.MessageCom.$destroy()
  this.MessageCom = null
}

这样的话就同样实现了一个显示，隐藏效果。

使用场景

通过上面的分析，我们发现这种操作完全没有必要，相比于通过属性来控制显示和隐藏；创建实例显得更加麻烦。
 但是它同样具有一定的使用场景。比如：单元测试时：

单元测试

在进行单元测试时，为了实现在Vue中的测试，我们必须创建一个基于某个组件的实例，然后才能进行测试。
 如下所示：

  it('可以设置icon.', () => {
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
    propsData: {
      icon: 'settings'
    }
    }).$mount()
    const useElement = vm.$el.querySelector('use')
    expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
    vm.$destroy()
  })

替代DOM操作

在一些场合下，我们可能需要创建一个div这种，通常的实现方式如下：

let oDiv = document.createElement();
oDiv.innerHTML = 'hello,world';
document.body.appendChild(oDiv);

但是，在Vue中操作DOM是非常不推荐的写法，这时候我们建议使用Vue.extend来实现DOM的操作。

const Constructor = Vue.extend(Toast);
   let oDiv = new Constructor();
   oDiv.$slots.default = [message];
   oDiv.$mount(); //必须使用$mount()进行挂载，否则所有的生命周期的函数都不会执行
   document.body.appendChild(oDiv.$el)

总结：

Vue.extend可以用于动态地创建实例，在一些场景下可以使用。

以上所述是小编给大家介绍的Vue中通过Vue.extend动态创建实例,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • vue.extend实现alert模态框弹窗组件

    本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert

  • Vue2 使用 Echarts 创建图表实例代码

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

  • 用Vue.extend构建消息提示组件的方法实例

    用Vue.extend构建消息提示组件的方法实例

    前提 前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码.自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它. 了解了这点之后

  • vue.extend与vue.component的区别和联系

    如果大家只顾开发,对基础知识不了解,在今后的解决问题过程中,也是个大问题,今天小编抽空对基础概念给大家屡一下,用于大家日后学习. Vue.extend({})简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器. 后可使用vue.component进行实例化.或使用new extendName().$mount(''+el)方式进行实例化(从而实现模拟组件). Vue.component({})简述:不多介绍了...用于生成全局组件 使用: 1,Vue.com

  • vue中如何创建多个ueditor实例教程

    vue中如何创建多个ueditor实例教程

    前言 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 具体可以参考这篇文章:http://www.jb51.net/article/118413.htm ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 最近工作中要求升级,需要

  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)

    1.安装vue-cli    cnpm install vue-cli -g  --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js       // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js          // 构建配置公用工具 vue-loader.conf.js // vue加载器

  • 关于vue.extend和vue.component的区别浅析

    关于vue.extend和vue.component的区别浅析

    前言 最近一个朋友问我vue.extend和vue.component两者之间有什么区别?突然这么一问竟答不出来,回来想想有必要总结下,所以本文就来给大家介绍关于vue.extend和vue.component的区别,下面话不多说了,来一起看看详细的介绍吧. Vue.extend 返回的是一个"扩展实例构造器",也就是一个预设了部分选项的 Vue 实例构造器 var myVue = Vue.extend({ // 预设选项 }) // 返回一个"扩展实例构造器" /

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • vue+el-element中根据文件名动态创建dialog的方法实践

    vue+el-element中根据文件名动态创建dialog的方法实践

    目录 背景 实现 1.封装的/utils/dialogControl.js 2.dialog文件定义  3.使用 背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: <confirm-dialog v-if="confirmDialogVisible" :title="$t(`mineData.tips.deleteDat

  • 深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景. Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册.使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例.使用恰当时,这可以用来为自定义选项注入处理逻辑. // 为自定义的选项 'myOption' 注入一个处理器. Vue.mixin({ created: function () { var myOption

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

  • vue导航栏部分的动态渲染实例

    根据公司项目的需求,使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单. 代码部分: <el-menu class='el-menu-vertical-demo' :router='true' v-for='(item, index) in navMenu' :key='index'> <el-submenu v-if='item.childs' :index='item.name' :route = 'item.value' clas

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

随机推荐