作者：刘刘刘刘刘志锋_506 | 来源：互联网 | 2023-08-20 21:56
一、组件和插件的区别
- vue插件可以将自己的模块添加到Vue原型对象上，然后组件中可以通过this直接引用。还要就是通过插件机制，可以通过一个入口，就可以将一系列组件添加到环境中，直接使用
- 插件是采用通用接口编写的，多用于制作好的东西功能扩展。
- vue组件只是一个独立的模块，可重复使用并且可以和其他对象进行交互的对象
- 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：
添加全局方法或者属性，如: vue-custom-element
添加全局资源：指令/过滤器/过渡等，如 vue-touch
通过全局 mixin 方法添加一些组件选项，如: vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
Vue.js 的插件应当有一个公开方法 install 。 - 如果你的模块或者组件想对外公开，最友好的方式就是通过插件机制提供
二、简单构建一个全局组件Message（消息提示）
1.组件模板
/* components/Message/index.vue */
<template>
<div class="ta-message" v-if="isShow">
<span>{{message}}span>
div>
template>
<script>
export default {
name: &＃39;Message&＃39;,
data () {
return {
}
},
props:{
message: {
type: String,
default: &＃39;成功&＃39;
},
isShow: {
type: Boolean,
default: true
}
},
methods:{
close(){
this.isShow = false;
}
}
}
script>
2.给组件添加全局功能（插件）
插件开发链接：https://cn.vuejs.org/v2/guide/plugins.html
/* components/Message/index.js */
import msg from &＃39;./index.vue&＃39;;
//定义插件对象
const Message = {};
//Vue的install方法，用于定义vue插件
Message.install = function(Vue, options){
const MessageInstance = Vue.extend(msg);
let currentMsg;
const initInstance = () =>{
//实例化vue示例
currentMsg = new MessageInstance();
let msgEl = currentMsg.$mount().$el;
document.body.appendChild(msgEl);
};
//在Vue的原型上添加实例，以全局调用
Vue.prototype.$msg = {
showMsg(options){
if(!currentMsg){
initInstance();
}
Object.assign(currentMsg, options); //将页面的对象传给currentMsg对象，否则阿会使用原有的
setTimeout(() => {
currentMsg.close();
}, 1000);
}
}
};
export default Message;
3.全局使用
// main.js
import Message from &＃39;./components/Message/index&＃39;
Vue.use(Message);
4.页面调用
showconfirm(){
this.$msg.showMsg({
isShow: true
});
}
京公网安备 11010802041100号