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. 使用事件总线方法:每个 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