vue学习笔记五：在vue项目里面使用引入公共方法详解

首先需要明确一下，该攻略是讲述如何在Vue项目中引入公共方法，让这些方法可以在项目的多个地方进行调用。下面按照步骤一一介绍。

步骤一：创建公共方法文件

首先我们需要创建一份公共方法文件，将这些方法封装在一起，供整个项目使用。我们可以在Vue项目的根目录下，创建一个名为utils.js的文件，用于存储公共方法。下面是一个简单的示例：

// utils.js

// 获取URL参数方法
export function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

// 数字转大写方法
export function numberToChinese(num) {
  var chnNumChar = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  var chnUnitSection = ["","万","亿","万亿","亿亿"];
  var chnUnitChar = ["","十","百","千"];

  var unitPos = 0;
  var strIns = '', chnStr = '';
  var needZero = false;

  if (num === 0) {
    return chnNumChar[0];
  }

  while (num > 0) {
    var section = num % 10000;
    if (needZero) {
      chnStr = chnNumChar[0] + chnStr;
    }
    strIns = sectionToChinese(section, unitPos);
    chnStr = strIns + chnUnitSection[unitPos] + chnStr;
    needZero = (section < 1000) && (section > 0);
    unitPos++;
    num = Math.floor(num / 10000);
  }

  return chnStr;
}

function sectionToChinese(section, unitPos) {
  var strIns = '', chnStr = '';
  var unitIndex = 0;
  var zero = true;

  while (section > 0) {
    var v = section % 10;
    if (v === 0) {
      if (!zero) {
        zero = true;
        chnStr = chnNumChar[v] + chnStr;
      }
    } else {
      zero = false;
      strIns = chnNumChar[v];
      strIns += chnUnitChar[unitIndex];
      chnStr = strIns + chnStr;
    }
    unitIndex++;
    section = Math.floor(section / 10);
  }

  return chnStr;
}

步骤二：在Vue组件中引入公共方法

有了公共方法文件之后，我们就可以在Vue组件中引入这些方法了。在需要使用公共方法的组件中，只需要使用import语句将公共方法引入即可。下面是一个示例：

// MyComponent.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="addCount">加1</button>
    <p>{{ chineseCount }}</p>
  </div>
</template>

<script>
import { numberToChinese } from '@/utils.js'  // 引入公共方法

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    chineseCount() {
      return numberToChinese(this.count)  // 使用公共方法
    }
  },
  methods: {
    addCount() {
      this.count += 1
    }
  },
}
</script>

步骤三：在Vue全局中注册公共方法

如果我们希望将某些公共方法定义为全局方法，可以在Vue入口文件中进行注册。下面是一个简单的示例：

// main.js

import Vue from 'vue'
import App from './App.vue'
import { getQueryVariable } from '@/utils.js'  // 引入公共方法

Vue.config.productionTip = false

Vue.prototype.$getQueryVariable = getQueryVariable  // 将公共方法注册到Vue全局

new Vue({
  render: h => h(App),
}).$mount('#app')

以上就是如何在Vue项目中引入公共方法的完整攻略。我们通过一个简单的示例演示了如何创建公共方法文件、在Vue组件中引入公共方法并使用、在全局中注册公共方法。当然，这只是一个简单的示例，实际开发中，我们可能需要引入更多的公共方法，并且需要更加详细的说明和示例来说明如何使用。