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+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
webpack中如何加载静态文件的方法步骤
May 18 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
python删除列表中重复记录的方法
2015/04/28 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
介绍一下write命令
2014/08/10 面试题
应届生自我鉴定
2013/12/11 职场文书
搞笑征婚广告词
2014/03/17 职场文书
新法人代表任命书
2014/06/06 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
起诉状范本
2015/05/20 职场文书
公司岗位说明书
2015/10/08 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书