如上面“您的第一個(gè)插件”示例中所述，您可以使用Mixin添加生命周期掛鉤并對(duì) Vue 組件進(jìn)行其他修改。

注意： Mixins 是一個(gè)相當(dāng)高級(jí)的主題，超出了本文的范圍。目前，一個(gè)充分的解釋是它們本質(zhì)上是組合到(“混合”)其他組件的組件定義。

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

安裝應(yīng)用程序范圍的組件和指令

如果您希望打包組件或指令以作為插件分發(fā)，您可以編寫如下內(nèi)容：

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 對(duì)象

Vue您可以從插件修改全局對(duì)象：

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

修改 Vue 實(shí)例

要在沒有任何注入機(jī)制的情況下直接向組件實(shí)例添加屬性或方法，您可以修改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;

這些屬性現(xiàn)在將添加到所有組件和 Vue 實(shí)例中。

注意：在 Vue 社區(qū)中，通常希望修改 Vue 原型的插件在任何添加的屬性前加上美元符號(hào) ( $)。

支持自動(dòng)安裝

對(duì)于在模塊系統(tǒng)之外使用您的插件的人，通常期望如果您的插件包含在 Vue 腳本標(biāo)記之后，它將自動(dòng)安裝而無需調(diào)用Vue.use(). 您可以通過將這些行附加到末尾來實(shí)現(xiàn)這一點(diǎn)my-vue-plugin.js：

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

Vue如果已添加到全局范圍，則自動(dòng)安裝。如果大家想了解更多相關(guān)知識(shí)，不妨來關(guān)注一下動(dòng)力節(jié)點(diǎn)Java視頻，里面的視頻課程從入門到精通，通俗易懂，很適合沒有基礎(chǔ)的小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助。