在vue中封装方法以及多处引用该方法详解

在Vue中，我们可以通过封装方法来复用代码，提高开发效率。下面我将详细介绍如何在Vue中封装方法以及多处引用该方法的实现方法。

封装方法

在Vue中封装方法可以通过创建一个公共JS文件来实现。假设我们需要封装一个计算年龄的方法。

1. 创建utils.js文件

您可以在项目的src目录下创建一个名为utils.js的文件。

1. 定义计算年龄方法

在utils.js中定义方法如下所示：

export function getAge(birthdate) {
  const today = new Date();
  const birthDate = new Date(birthdate);
  let age = today.getFullYear() - birthDate.getFullYear();
  const m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

此时我们定义了一个名为getAge的方法，该方法用于根据出生日期计算年龄，并将其作为模块的一个导出导出。

多处引用该方法

接下来，我们将看到如何在多个地方使用该方法。我们将以两个场景来介绍这种情况。

场景一

首先，假设我们在某个页面中需要使用getAge方法，我们可以如下方式引入utils.js并调用getAge方法：

import { getAge } from '@/utils';

export default {
  data() {
    return {
      birthdate: '1990-01-01'
    };
  },
  computed: {
    age() {
      return getAge(this.birthdate);
    }
  }
}

在本例中，我们首先通过ES6的import语句将getAge方法导入，然后在computed计算属性中使用该方法。

场景二

其次，假设我们需要在Vue中的某个mixins中使用getAge方法，我们可以在mixins中引入utils.js ，并声明混合对象，以便我们可以使用getAge方法：

import { getAge } from '@/utils';

export const AgeMixin = {
  data() {
    return {
      birthdate: '1990-01-01'
    };
  },
  computed: {
    age() {
      return getAge(this.birthdate);
    }
  }
}

// mixins的使用方式
import { AgeMixin } from '@/mixins';
export default {
  mixins: [AgeMixin]
}

以上就是在Vue中封装方法以及多处引用该方法的详细攻略。