Vue插件（三）全局混入

前言

使用混入的方式，可以实现vue的继承功能；
同理，我们也可以通过全局混入的方式，实现插件的引入；

一、创建一个插件

• 创建一个插件文件DateFormatter

<script>
import moment from 'moment';
export default {
    methods: {
        dateFormat(date, format) {
            return moment(date).format(format);
        }
    }
}
</script>

二、引入插件

• 在main.js中引入该插件

import dateFormat from './DateFormatter.vue'
Vue.mixin(dateFormat)

使用Vue.mixin可全局混入dateFormat插件

三、使用插件

<script>
export default {
  name: 'App',
  data() {
    return {
      date: new Date
    }
  },
  computed: {
    currentDate() {
      // 使用插件
      return this.dateFormat(this.date, 'YYYY-MM')
    }
  }
}
</script>

可以使用this.方法()直接调用插件中的方法；

使用Vue.mixin全局混入插件，相当于所有的组件都继承于该插件，所以可通过this直接调用插件内的方法和属性；