Vue插件（二）添加全局的实例方法或实例属性

前言

通过给Vue添加实例方法或属性，可以实现插件的添加；

一、创建一个插件

• 创建一个DateFormatter.js文件
  组件内部实现代码：

import moment from 'moment'
export default function dateFormat(date, format) {
    return moment(date).format(format)
}

二、引入一个插件

在main.js文件中，引入插件

import dateFormat from './DateFormatter.js'
Vue.prototype.$dateFormat = dateFormat;

通过Vue.prototype给Vue添加实例方法，在Vue项目中，所有的组件都可以调用该实例方法；

在方法名之前添加$符号，来标明是全局的实例方法

三、使用插件

<script>
export default {
  name: 'App',
  data() {
    return {
      date: new Date
    }
  },
  computed: {
    currentDate() {
      // 使用该全局的实例方法
      return this.$dateFormat(this.date, 'YYYY-MM')
    }
  }
}
</script>

该插件是直接变成了Vue的实例方法，所以在vue组件中，可以直接使用this.实例方法()调用。