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


Posted in Javascript onAugust 13, 2019

在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动态创建实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
vue实现下拉加载其实没那么复杂
Aug 13 #Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
bootstrap table实例详解
2017/01/06 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
对Python中plt的画图函数详解
2018/11/07 Python
详解Python装饰器
2019/03/25 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python实现横向拼接图片
2020/03/23 Python
Java程序员面试90题
2013/10/19 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
暑期家教宣传单
2015/07/14 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Python绘制散乱的点构成的图的方法
2022/04/21 Python