vue-extend和vue-component注册一个全局组件

extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。

在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：

所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。

所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框

1、在components文件夹下新建alert文件夹，里面首先新建一个alert.vue文件

<!-- alert -->
<template>
    <div class="alert" v-show="showAlert">
        <p class="msg">{{ msg }}</p>
    </div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            default: ''
        },
        showAlert: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    //方法集合
    methods: {}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.alert {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    .msg {
        text-align: center;
        font-size: 20px;
        padding: 5px 10px;
    }
}
</style>

2、然后在alert文件下再新建一个alert.js文件，写扩展插件的js

import Alert from "./alert.vue";
const ALERT = {
    install(Vue) {
        Vue.component('alert', Alert); // 一定先注册

        Vue.prototype.$alert = (text) => {
            let VueAlert = Vue.extend({
                data() {
                    return {
                        msg: '',
                        showAlert: false
                    }
                },
                render(h) {
                    let props = {
                        msg: this.msg,
                        showAlert: this.showAlert,
                    }
                    return h('alert', {
                        props
                    })
                }
            });
            let newAlert = new VueAlert();
            let vm = newAlert.$mount();
            let el = vm.$el;
            document.body.appendChild(el); // 添加到页面中
            vm.showAlert = true;
            vm.msg = text;
        }
    }
}
export default ALERT;

3、在main.js中引入

、、、、
import diyAlert from '@/components/alert/alert'; // extentd写alert
、、、
Vue.use(diyAlert);

4、这样就可以在全局调用了：

<!-- extend写message -->
<template>
    <div class="extentd">
         <el-button type="primary" @click="alert">alert</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    //方法集合
    methods: {
        alert() {
            this.$alert('hahahah');
        }
    }
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

剩下的就是在此基础上进行功能性扩展了，比如关闭，动效等，就简单了。