javascript - 如何在 Vue 中的组件之间共享一些代码

Question

我有这样的代码的组件:

  export default {
    name: 'signup',
    data () {
      var myValidator = (rule, value, callback) => {
        // cut some code, but here the access to component property
        t = this.response
      };
      return {
        signupDTO: {
          email: '',
          password: '',
        },
        response: {},
        rules: {
          password: [
            {validator: myValidator},
          ],
        },
      }
    },
    methods: {

我想分享 myValidator 和 response 以避免在许多组件中重复该代码。但是，可能是因为缺乏 Javascript 知识，我不知道该怎么做。因此，我们将不胜感激任何建议。

Answer 1

Vue.js 非常灵活。有多种选择。共享数据:

1. 使用 Root Vue 组件:此组件可在内部访问 each component通过 $root 属性。您可以使用它来共享数据。 (不推荐)
2. 使用 Event Bus 方法:每个 Vue 组件都像一个 Event Bus具有 $on 和 $emit 方法。您可以使用它来共享数据。 (适用于较小的应用程序和概念证明)
3. 使用状态管理，如 Vuex 或 Redux:跨 View 和组件共享数据的最通用和可扩展的方式。我都用过，它们都很好。首先，Vuex 很简单。

就共享功能而言。您可以使用:

1. 混合:Mixins允许您跨组件共享可重用的代码片段。 (推荐方式)
2. 插件:Plugins是另一种使您能够跨所有组件注入(inject)和运行的方式。这就是 Vue Router 或 Vuex 注入(inject)数据/函数的方式。通常，您会使用 Vue 实例或原型(prototype)修补来注入(inject)所需的功能。 (仅推荐用于高级场景)。
3. 提供/注入(inject):您可以使用 Vue.js dependency inject在父子组件之间共享数据/功能。 (再次推荐用于高级场景)
4. 继承:您还可以在 Vue.js 中使用继承。使用扩展 property .但请注意，继承带来的问题多于解决方案。

对于函数，尽量依赖ES模块，大家可以共享。如果您需要在函数内访问 Vue 组件实例属性，请考虑将它们作为参数传递给函数。

---

In a nutshell:

1. For sharing data: Use state management like Vuex
2. For Sharing functions: Use ES Modules or Mixins