vue注册全局插件的两种方式

一、模仿element-ui中this.$message()方式创建全局插件

vue2.x环境下：写好的任意组件VantAlert.vue,需要注册全局组件：

1、首先创建vantAlert.js文件开发插件：

此文件暴露出一个拥有install方法的对象，install方法的第一个参数是Vue构造器，第二个参数option是可选的对象参数。使用vue.use()可以直接调用install方法。

import VantAlert from './VantAlert.vue'

export default {

install: (Vue) => {

// 利用Vue.extend创建构造器

    const CommentAlert = Vue.extend(VantAlert)

// 实例化组件

    const instance = new CommentAlert()

// 为vue原型添加$commentAlert方法

    Vue.prototype.$commentAlert = (options = {}) => {

    // 挂载组件

      instance.$mount()

    // 将组件元素添加到body中

      document.body.appendChild(instance.$el)

    // 改变实例中data的值

      instance.show =true

    }

}

}

2、在main.js文件中导出的方法放到vue的原型链上

// main.js中引入函数文件

import vantAlert from "./components/commentAlert/component/vantAlert";

//使用插件，Vue.use应该在new Vue()之前调用，并且Vue.use会阻止多次注册相同组件，即使多次调用也只会注册一次该组件。

Vue.use(vantAlert)

3、使用

this.$vantAlert({content:‘传递的参数’})

4、注册的组件内正常编写代码:传递过来的参数data接收

export default {

  name:"VantAlert",

  data() {

    return {

        show:true,

        content:'默认的内容',  //能够接收传递过来的参数

        showTitle:false

     }

  }

}

vue3.0环境下：只是写法上稍微有些不同：

1、vantAlert.js文件更改如下

import {createApp } from 'vue'

import VantAlert './VantAlert.vue'

const vantAlert=function(options = {}) {

  //注册组件,并接收传递的参数

  let messageConstructor =createApp(VantAlert, { ...options })

  //将组件挂载到body下，instance.$el是需要挂载的组件

  messageConstructor.mount('body')

}

export default vantAlert

2、main.js中将组件方法绑定到原型链上：

import {createApp } from 'vue'

import App from './App.vue'

import vantAlertfrom './components/vantAlert'

const app =createApp(App)

app.config.globalProperties.$vantAlert=vantAlert

3、使用传参数跟vue2.x一样

4、组件内接收参数通过props接收参数

export default {

    name:"index",

    props: {

      content: {

         type:String,

         default:'暂无文案'

       }

  }

}