三步实现一个 Vue 工具类

实现方法：全局注册，多文件调用¹

// toolbox.js
export default {
  install(Vue) {
    Vue.prototype.$toolFunction = function () {
      //全局注册toolFunction方法
      console.log("11111");
    };
  },
};

使用方法：

1. 新建一个js文件，用来注册全局方法（此例中新建toolbox.js

export default{
	install(Vue, options){
		Vue.prototype.$aaaaa=function(){ //全局注册aaaaa方法
			console.log('aaaaa')
            console.log(this); // this 指向了 Vue 对象
            this.$bbbbb();
            this.$ccccc();
		},

		Vue.prototype.$bbbbb=function(){ //全局注册bbbbb方法
			console.log('bbbbb')
		}
        
        Vue.prototype.$ccccc = ()=> {
            console.log(this) // ！不能使用箭頭函數！！！！
        }
	}
}

（2）在 main.js 中注入 toolbox.js 文件

import toolbox from "@/utils/toolbox.js";
Vue.use(toolbox);

（3）使用：在任意组件中调用global.js中的方法：

this.aaaaa();

运行结果：

2.定义单独的方法，调用时需引入
代码如下（示例）：

// singleTool.js
export function XXXX(value) {
  console.log("1111");
}
// import {XXXX} from singleTool.js

---

1. https://blog.csdn.net/u013437812/article/details/117816607 ↩︎