Vue - 重用方法的最佳方式答案

【问题标题】：Vue - best way to reuse methodsVue - 重用方法的最佳方式
【发布时间】：2017-08-01 02:24:13
【问题描述】：

在 vue 2 中 - 重用 vue 方法的正确做法是什么？

与其在每个组件中编写它们，不如让它们全局化的最佳方法是什么？

【问题讨论】：

【解决方案1】：

在 Vue2 中没有真正好的代码重用机制，它们只是变通方法，有时如果没有精心设计，它们会增加比它们提供的更令人头疼的问题。但幸运的是，Vue3 提供了 Vue 长期以来缺少的东西，新的 Composition API（真正的组合而不是合并逻辑（mixins）或包装逻辑（slots 或 scoped-slots）。即使它是 Vue 3 的一部分，你也可以仍然在你的 Vue2 应用程序中将它作为一个单独的模块使用。Composition API 提供了与 Hooks 被引入 React 社区时相同的快乐开发体验。

【讨论】：

【解决方案2】：

混音

你可以为它创建一个mixin

Mixins 是一种为 Vue 组件分配可重用功能的灵活方式。 mixin 对象可以包含任何组件选项。当组件使用 mixin 时，mixin 中的所有选项都会“混合”到组件自己的选项中。

例子：

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

如果不想在所有组件中手动混合，可以使用global mixin

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

插件

另一种创建全局可用方法的方法是创建plugin。

MyPlugin.install = function (Vue, options) {
  //  add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }
  //  inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })
  //  add an instance method
  Vue.prototype.$myMethod = function (options) {
    // something logic ...
  }
}

通过调用Vue.use() 全局方法来使用插件：

Vue.use(MyPlugin)

现在这些方法将随处可用。你可以看到这个here的例子。

【讨论】：