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非常灵活。有多种选择。分享数据：

使用根Vue 组件：可以通过$root属性在each component内访问此组件。您可以使用它来共享数据。（不推荐）
使用事件总线方法：每个Vue组件的行为类似于Event Bus $on和$emit方法。您可以使用它来共享数据。（适用于较小的应用程序和概念证明）
使用 Vuex 或 Redux 等状态管理：跨视图和组件共享数据的最通用和可扩展的方式。我用过两者都很好。 Vuex很简单，一开始就是。

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

Mixins：Mixins允许您在整个组件中共享可重用的代码片段。（推荐方式）
插件：Plugins是另一种使您能够在所有组件中注入和运行的方法。这就是Vue Router或Vuex注入数据/功能的方式。通常，您将使用Vue实例或原型修补来注入所需的功能。（仅建议用于高级方案）。
提供/注入：您可以使用Vue.js dependency inject跨父子组件共享数据/功能。（再次推荐用于高级场景）
继承：您还可以在Vue.js中使用继承。使用extends property。但要注意，继承比解决方案带来更多问题。

对于功能，尝试尽可能多地依赖ES模块进行共享。如果需要访问函数内的Vue组件实例属性，请考虑将它们作为参数传递给函数。

简而言之：


用于共享数据：使用Vuex等状态管理

对于共享功能：使用ES模块或Mixins

Answer 2

您可以创建全局functional composition?并在全球范围内存储response。正如@dr_barto建议的那样，您还可以使用mixins在组件之间分发myValidator。

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

2 个答案: