插件的开发

在 vue 中开发插件,一般情况下用于高解耦组件,比如我们常用的放大镜插件,轮播等,都是基于此开发。

vue 中提供一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:基于它就可以开发我们的插件;

开发一个插件

// 这里贴出我封装的一个demo例子
import Com from "./Com.vue"; // 这个是可选的,这里是我的一个普通vue组件;
let Songyu = {};
Songyu.install = function(Vue, options) {
  // console.log(options);
  Vue.search = function(val) {
    return val + "全局方法,挂载在Vue上所以只能用Vue调出来";
  };
  Vue.prototype.$myMethod = function(val) {
    return val + "原型上添加方法,可以使用this找到该方法";
  };
  // 将我的组件注册成全局内置的组件,这样在任何地方都可以使用<Com />了
  Vue.component("Com", Com);
};

export default Songyu;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用插件

// 一般我们入口文件main.js中初始化安装插件
import MyPlugin from "./myplugin.js";
// 注册使用
Vue.use(MyPlugin);
// or 也可以传入一个可选的选项对象:
Vue.use(MyPlugin, { someOption: true });
1
2
3
4
5
6

Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。

Last Updated:
Contributors: websong