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 load方法用法集锦
Dec 06 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
innerText 使用示例
Jan 23 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php自动获取关键字的方法
2015/01/06 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php经典趣味算法实例代码
2020/01/21 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python内置函数OCT详解
2016/11/09 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
pandas数据集的端到端处理
2019/02/18 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python中的itertools的使用详解
2020/01/13 Python
精彩的推荐信范文
2013/11/26 职场文书
大学生实习证明范本
2014/01/15 职场文书
房屋转让协议书范本
2014/04/11 职场文书
企业投资意向书
2015/05/09 职场文书
《月光曲》教学反思
2016/02/16 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python序列化与反序列化相关知识总结
2021/06/08 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript