Vue.extend()实现多个页面弹框登录（vue.use、vue.prototype）

官网照明：API — Vue.js

使用场景：使用基础 Vue 构造器，创建一个“子类”。当项目中想要每个页面或者特定的多个页面弹出、出现xxx内容时，可以使用Vue.extend()实现。

• 场景1：只要登录后才能实现收藏，想在所有涉及到收藏的页面判断是否登录，没有登录的在点击收藏时弹出登录框。
• 场景2：给每个页面增加一个回到首页的悬浮按钮。

代码实现： 

•   先建一个LoginModal.vue文件将弹框内容实现；

• 创建一个LoginModal.js文件来将实例构造器挂载在页面上；

import Vue from "vue";
import Login from '@/pages/LoginModal.vue';

// 1.使用基础 Vue 构造器，创建一个“子类”；
const LoginModal = Vue.extend(Login);   
const LoginModalBox = (options = {}) => {
    // 2.创建 LoginModal 实例；
    let instance = new LoginModal();  //无传参
    // let instance = new LoginModal({
    //     data: {
    //         ...options, //有传参
    //     },
    // });
    // 3.实例构造器需要进行挂载到页面中；
    instance.$mount(); 
    // 4.通过$el属性来访问创建的组件实例；
    document.body.appendChild(instance.$el); 
    console.log(instance, 'instance');
    return instance;
};
// 5.两种方式将逻辑函数进行暴露，并且在mian.js引入挂载到全局；
// 5-1.Vue.prototype直接暴露；
export default LoginModalBox; 
// 5-2. vue.use()的install()暴露对象；
export default {
    install: (Vue) => {
        Vue.prototype.$loginModal = LoginModalBox;
    },
};

•  在mian.js引入挂载到全局；

1. 如果是使用的5-1的方式直接暴露，则在main.js中直接写：Vue.prototype.$loginModal = LoginModalBox;
2. 如果是使用的5-2的install()方法来暴露一个对象，则在main.js中直接写：Vue.use(LoginModalBox);

import Vue from 'vue';
import store from './store/index'
import App from './App.vue';
import router from './router';
import LoginModalBox from '@/core/LoginModal.js'
Vue.config.productionTip = false;

// 方法一：在原型上定义，使其在每个Vue中的实例中可用；
Vue.prototype.$loginModal = LoginModalBox;
// 方法二：使用Vue.use
// Vue.use(LoginModalBox);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

• 使用创建的‘子类’；

handleLogin() {
    // 直接调用loginModal页面的方法
    this.$loginModal().handleOpen();
},

知识点：Vue.use 与 Vue.prototype 的区别

1. Vue.prototype是在原型上定义，使其在每个Vue中的实例中可用。
2. Vue.use()方法的核心就是Vue.prototype，只不过又封装了一层，执行install 方法，更加的灵活，扩展性更好。
3. 两者没有本质区别。Vue.prototype适合于注册Vue生态外的插件，Vue.use适合于注册Vue生态内的插件。