vue.extend的使用二

下面从另一个角度介绍下vue.extend()的使用

背景：开发了一个组件想全局通过方法调用

1、main.js

import alert from "./components/alert";

Vue.mixin({
    methods: {
        showNotice: function(msg, el) {
            const Constructor = Vue.extend(alert);
            const vm = new Constructor();
            vm.message = msg;
            vm.$mount(el);
        }
    }
})

2、业务代码中

<template>
    <button @click="showNotice('弹我', $refs.cover)">点我</button>
    <div ref="cover">这是一个弹出层的蒙版</div>
</template>

3、总结

这样在页面中只要调用那个定义的方法，然后传参(参数可以用对象的形式传过去，自己改一下就行了)过去就能实现弹窗，不用再每个页面去引入组件，data定义一个变量去保存message，components注册组件，再调用加载绑定

可以实现：通过调用方法即可控制组件的样式

实际开发过程中很多地方都能用这样方式去抽离组件，UI库里面的一些组件也是这样的模式装载的。