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插件 cluetip 关键词注释
Jan 12 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
js实现3D旋转相册
Aug 02 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python numpy 常用函数总结
2017/12/07 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python实现动态数组的示例代码
2019/07/15 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
2014国培学习感言
2014/03/05 职场文书
12岁生日演讲稿
2014/05/14 职场文书
公司任命书模板
2014/06/06 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android