教你创建自定义Vue插件

构建你的第一个插件

作为对Vue插件世界的介绍，我们将编写一个插件，每次将组件挂载到DOM时都会写入控制台。

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};
export default MyPlugin;

Vue 插件是一个对象，其install方法带有两个参数：

全局Vue对象

和一个包含用户定义的对象options

Vue.mixin()用于将功能注入所有组件。在这种情况下，该mounted()方法会在组件添加到 DOM 时运行。

您的插件现在可以通过导入并调用来在 Vue 应用程序中使用Vue.use(MyPlugin)：

import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'
Vue.use(MyPlugin)
new Vue({
  el: '#app',
  render: h => h(App)
});

您可能想知道，为什么我不能通过调用Vue.mixin()来做到这一点main.js?原因是由于我们向 Vue 添加了不直接修改应用程序的全局功能，因此几乎总是最好将其拆分为一个可以随意添加或删除的单独模块。它还使插件非常容易分发。

添加能力

添加组件生命周期挂钩或属性

如上面“您的第一个插件”示例中所述，您可以使用Mixin添加生命周期挂钩并对 Vue 组件进行其他修改。

注意： Mixins 是一个相当高级的主题，超出了本文的范围。目前，一个充分的解释是它们本质上是组合到(“混合”)其他组件的组件定义。

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};
export default MyPlugin;

安装应用程序范围的组件和指令

如果您希望打包组件或指令以作为插件分发，您可以编写如下内容：

import MyComponent from './components/MyComponent.vue'
import MyDirective from './directives/MyDirective.js'
const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.component(MyComponent.name, MyComponent)
    Vue.directive(MyDirective.name, MyDirective)
  }
};
export default MyPlugin;

修改全局 Vue 对象

Vue您可以从插件修改全局对象：

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};
export default MyPlugin;

修改 Vue 实例

要在没有任何注入机制的情况下直接向组件实例添加属性或方法，您可以修改Vue prototype如下所示：

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};
export default MyPlugin;

这些属性现在将添加到所有组件和 Vue 实例中。

注意：在 Vue 社区中，通常希望修改 Vue 原型的插件在任何添加的属性前加上美元符号 ( $)。

支持自动安装

对于在模块系统之外使用您的插件的人，通常期望如果您的插件包含在 Vue 脚本标记之后，它将自动安装而无需调用Vue.use(). 您可以通过将这些行附加到末尾来实现这一点my-vue-plugin.js：

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}

Vue如果已添加到全局范围，则自动安装。如果大家想了解更多相关知识，不妨来关注一下极悦Java视频，里面的视频课程从入门到精通，通俗易懂，很适合没有基础的小白学习，希望对大家能够有所帮助。