一、模仿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:'暂无文案'
}
}
}
