vue 中自定义全局函数

当前位置: 首页 » 记录 » javascript » vue 中自定义全局函数

分类: javascript 1,197阅读阅读模式

常见的函数写法,在某个 js 文件中定义方法,在其他组件使用时,先 import 再使用,如下:

func.js 定义了多个函数方法

  1. function xxx(){
  2.   ...
  3. }
  4. function xxx2() {
  5.   ...
  6. }
  7. module.exports = {
  8.   xxx,
  9.   xxx2
  10. }

xxx.vue 中使用

  1. import {xxx,xxx2} from "xxx.js"
  2. xxx()

 

每次用该方法时都需要 import {xxx,xxx2} from "xxx.js",无疑带来许多不必要的重复代码。
如果不想这么写,这就需要来定义全局函数。

 

单个注册

常见的定义是这样的:
在入口 inde.js 文件写:

  1. Vue.prototype.xxx = function(){
  2.   ...
  3. }
  4. Vue.prototype.xxx2 = function(){
  5.   ...
  6. }

然后在子组件 xxx.vue 中直接调用该方法:

  1. this.xxx()
  2. this.xxx2()

这种是一个常见的写法,但是不太适用于多个。
因为太多导致入口文件 index.js 一大堆 function ,导致后期维护艰难,写函数注释也是无从下手。

 

集中注册

有没有集中放在一个js文件中,然后再进行注册?有的
如:

func.js 中改写成如下函数

  1. function xxx(){
  2.   ...
  3. }
  4. function xxx2() {
  5.   ...
  6. }
  7. // 直接挂载
  8. exports.install = function (Vue,opt) {
  9.   Vue.prototype.xxx = xxx;
  10.   Vue.prototype.xxx2 = xxx2;
  11. }

入口 index.js 中写:

  1. import AllFunc from "./func.js";
  2. Vue.use(AllFunc)

在子组件中直接写

  1. this.xxx()
  2. this.xxx2()

 

引入js框架

额外的,引入其他 js 框架挂载到全局
如引入 weui.js 文件中的函数
那么在 func.js 中添加挂载

  1. import weui from "weui.js";
  2. exports.install = function (Vue,opt) {
  3.   Vue.prototype.weui = weui;
  4. }

在子组件中直接写 weui.js 中的方法:

  1. this.weui.toast("xxx");

 

完!

 

相关文章

评论一下

【注意1】:首次评论使用表情将会进入审核状态。
【注意2】:无意义回复、乱打文字内容将会进入审核状态。
【注意3】:涉及辱骂、色情、政治、毒品、赌博内容将会进入审核状态。
【注意】:首次评论使用表情将会进入审核状态。

相关评论 当前评论 1 条 [ 游客 1 | 博主 0 ]

  1. 哈哈 [] @回复
    ① 楼 5 个月前

    评论我看看怎么样

    0
    0