vue项目开发全局组件笔记

在开发vue项目时，经常会用到element UI组件，在全局使用像message，toast，alert等组件得时候会很方便，但是在开发需要UI制定的项目时，就不能使用element UI了，这时就需要自己去开发属于自己的组件库了。
具体的开发方法官网提供了。下面我们就根据官网提供的方法来开发属于我们自己的alert警告组件

1. 首先我们要在src/components文件夹下创建一个alert文件夹，在里面创建两个文件

├── src
│   ├── components
│   │   ├── alert
│   │   │   ├── alert.vue #alert组件
│   │   │   ├── index.js #插件逻辑

2. 编写alert组件

3. 现在就要index.js中注册组件并完成业务逻辑了，（在这里我们要注意，如果我们要在除了vue组件以外的地方使用得话，例如我们封装的api.js里如果需要alert某些请求状态的时候，需要下面第一种写法）

import AlertComponent from './alert.vue'
import Vue from 'vue'
const Alert = (msg, confirmSure = () => {}) => {
  const Constructor = Vue.extend(AlertComponent) //创建一个alert子实例
  let instance = new Constructor({
    el: document.createElement('div'), //将alert实例挂载到创建的div上
    data() {
      return {
        message: msg, //需要显示的信息
        show: true //在调用alert时显示组件
      }
    },
    methods: {
      confirmSure: confirmSure //点击关闭的时候触发的回调函数
    }
  })
  document.body.appendChild(instance.$el) //添加到body中
}

export default Alert

但是如果我们只是在vue组件中使用的话，使用下面第二种注册方法

import AlertComponent from './alert.vue'

const Alert = {
  install(Vue) {
    const Constructor = Vue.extend(AlertComponent) //创建一个alert子实例
    let instance = new Constructor({
      el: document.createElement('div') //将alert实例挂载到创建的div上
    })
    document.body.appendChild(instance.$el) //添加到body中
    //绑定到vue原型上，以供全局使用
    Vue.prototype.$alert = (msg, confirmSure = () => {}) => {
      instance.message = msg //需要显示的信息
      instance.show = true //在调用alert时显示组件
      instance.confirmSure = confirmSure //点击关闭的时候触发的回调函数
    }
  }
}

export default Alert

4. 最后我们在main.js引入的时候也需要注意，如果我们要在组件和组件以外的情况下使用alert的话，我们需要这样引入

import Alert from '@/components/alert'
Vue.prototype.$alert = Alert

再如果我们只是在vue组件里使用的话，我们要这样引入

import Alert from '@/components/alert'
Vue.use(Alert)

5. 最后我们就可以愉快的调用组件了

//调用方法（组件以外的调用方式）
import Alert from '@/components/alert'
Alert('用户会话过期，请重新登录', () => {
    console.log('我被调用了')
})
组件内使用
this.$alert('用户会话过期，请重新登录', () => {
    console.log('我被调用了')
})