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

seanHai 发布于2019-08-26 10:45 / 634人阅读

摘要：中通过动态创建实例在中，如果我们想要动态地来控制一个组件的显示和隐藏，比如通过点击按钮显示一个对话框或者弹出一条信息。通过创建构造器这个构造器用于需要显示是创建实例。

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

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

    
        
        这是一条通过按钮控制显示隐藏的信息

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

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

const Constructor = Vue.extend({
    template:` {{message}} `,
    data(){
        return {
            message:"这是一条通过按钮控制显示隐藏的信息"
        }
    }
})

需要显示时创建实例

showHandle(){
    const MessageCom = this.MessageCom = new Constructor({
        propsData:{
            show:true
        }
    }).$mount();

    this.$refs.message.appendChild(MessageCom.$el);
}

需要隐藏时删除实例

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可以用于动态地创建实例，在一些场景下可以使用。

云服务器 GPU云服务器动态创建实例 vue实例属性实例创建 esc实例创建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106707.html

Vue.js基本语法的介绍

摘要：当表达式的值发生变化时，响应应用特定的行为到。指的是否重复，对重复的进行服用循环中，表示数组第个元素表示对象的样式绑定样式也可以根据中的变量来动态确定。介绍前段时间接触到一个库叫做Vue.js, 个人感觉很棒，所以整理了一篇博文做个介绍。Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb...

Jensen 2019-08-21 10:48 评论0 收藏0
【Vue实例】

摘要：的介绍就直接连接到官网了，官网介绍很详细了介绍构造函数在使用之前我们首先需要构建实例以上代码是通过构建了一个实例，构造函数中是一个对象，上面代码我用了一个空的对象，对象中可以包含数据模板挂载元素方法生命周期钩子等选项。使用过一段时间的vue1.0,现在vue已经更新了很多版本了，语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接...

jerryloveemily 2019-08-20 18:31 评论0 收藏0
VUE

摘要：注意指令前面需要加，对指令传递数据赋值使用例如约定速成加上，表示自定义指令不要使用驼峰式命名。需要通过方法实现自定义指令注册完成。 vue Vue.js 构建数据驱动的web界面库。集中实现MVVM 的 VM层。容易与其他库或项目整合通过尽可能简单的API实现相应的数据绑定和组合的视图组件核心：相应的数据绑定系统，数据与DOM保持同步数据驱动的视图，普通的HTML模板中使用特殊的语...

bergwhite 2019-08-19 18:39 评论0 收藏0
面试被问到Vue?想进一步提升?那就停下来看一下吧

摘要：两个对象键名冲突时，取组件对象的键值对。允许声明扩展另一个组件可以是一个简单的选项对象或构造函数，而无需使用。这主要是为了便于扩展单文件组件。 Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在...

andot 2019-08-26 14:05 评论0 收藏0
Vue.extend用法（主要用于需要动态渲染的组件，或者类似于window.alert() 提示

摘要：一简单的使用主要用于需要动态渲染的组件，或者类似于提示组件注意创建的是一个组件构造器，而不是一个具体的组件实例属于的全局，在实际业务开发中我们很少使用，因为相比常用的写法使用步骤要更加繁琐一些。最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件； mint-UI的t...

masturbator 2019-08-23 18:35 评论0 收藏0