在 .vue 文件之间共享一个 js-class答案

【问题标题】：share a js-class between .vue files在 .vue 文件之间共享一个 js-class
【发布时间】：2021-10-30 18:03:09
【问题描述】：

在我那个年代，我们有一个疯狂的东西，叫做包含或导入或其他什么。这意味着您在一个文件中编写了一些代码，然后在不同的文件中重复使用它。因此，您将在文件 x 中创建一个类，将此文件包含在另一个文件 y 中并从中实例化一个对象。基本上这意味着，即使文件 y 被写入文件 x，您也可以调用函数表单文件 y。

如何在vue.js 中完成这样的事情？我知道这样做的新方法称为“组件 api”。在网上我只找到了一些与 dom 耦合的非常复杂的例子，我不需要。

或者我应该使用mixins？ Mixins 似乎至少可以工作，但他们有范围问题。

这是我要分享的文件（x.vue）：

<script>
export default
{
    data ()
    {
        return {
            a: 'test'
        }
    }
    ,mounted ()
    {
        
    }
    ,methods:
    {
        test ()
        {
            console.log( "test : " + this.a );
        }
    }
}
</script>

y.vue：

  <script>
    import x from './x.vue'
    
    export default {
        
        name:"whatever"
        
        ,components:
        {
            x
        }
        ,mounted()
        {
            x.a = "it is working";
            x.test();
        }
    }
    </script>

网络浏览器告诉我 a 不是函数。有谁知道错误在哪里？还是我应该创建一个 js 类并尝试导入它？

感谢您的帮助。

【问题讨论】：

添加了mixins 的外观答案。正如您在另一条评论中所说，这不会解决您将其称为 x.test() 的请求，但根据我的经验，您可以快速学习如何避免以与其他人匹配的方式命名您的函数：D
对我的答案添加了编辑。可能与您的需求相匹配的东西。
也许我真的已经在使用 oltimer 了，但是使用比命名约定更好的方法来解决此类冲突已在几十年前得到解决。回到那个方法似乎很疯狂，但如果没有其他方法，我似乎别无选择。感谢您的帮助。
你读过我的回答吗？这是你想要的。在您的情况下，您可以致电this.$super(x).sayHello();。
是的，我有，但这只会改变函数的调用方式。碰撞仍然可能发生。

标签： javascript vue.js vue-component

【解决方案1】：

我相信您正在寻找 mixins： https://vuejs.org/v2/guide/mixins.html

它们允许您从另一个文件共享函数、数据、挂钩和所有其他内容。

【讨论】：

我知道 mixins，但我想要那个“x”。在函数调用之前。像“x.test()”。使用 mixins，这将是 beocem “test()”，如果我的 y.vue 文件中有一个测试函数，我将度过一段糟糕的时光。还是应该像旧的 c 一样为所有函数添加前缀？

【解决方案2】：

这将是您的一种方法。

mixins.js：

export default {
    methods: {
        sayHello () {
            console.log( "test : " + this.a);
        }
    }
};

component.vue：

<script>
    import mixins from "@/path/to/mixins/mixins";

    export default {
      name: "whatever",
      mixins: [mixins],
      data ()
      {
          return {
              a: 'HELLO'
          }
      },
      created() {
        this.sayHello();
      }
    }
</script>

更多信息：Mixins

编辑：看起来有符合您需求的东西！

mixins.js：

export default {
    name: 'Mixin',
    methods: {
        sayHello() {
            console.log("Hello")
        }
    }
}

component.js：

export default {
    name: 'whatever',
    mixins: [Mixin],
    created() {
      this.$super(Mixin).sayHello();
    }
}

EDIT2：根据您的要求，传递参数的简单示例。

mixins.js：

export default {
    methods: {
        sayHello(foo, bar) {
            console.log(foo + bar)
        }
    }
}

component.js：

export default {
    name: 'whatever',
    mixins: [Mixin],
    data () {
        return {
            baz: 'Say'
        }
    },
    created() {
      this.sayHello(this.baz, " Hello");
    }
}

【讨论】：

我知道 mixins，但我想拥有那个“mixins”。在函数调用之前。像“mixins.sayHello()”。使用 mixins，这将变成“this.sayHello()”，如果我的 component.vue 文件中有 sayHello 函数，我将度过一段糟糕的时光。还是应该像旧的 c 一样为所有函数添加前缀？
阅读您的其他评论并用评论回复您的问题。但是，是的，您应该在它们前面加上前缀以明确它们的用法。例如：如果你将sayHello()外包给一个mixin，因为你也会在其他组件中使用它，所以称它为globalSayHello()是合理的。
no mixin 不起作用，因为您无法通过这些函数调用传递参数。 vue 真的很厉害。人们为什么要使用它？有人用它创建过一个大项目吗？一旦代码超出原型设计阶段，它似乎就崩溃了。
当然你可以传递参数，我现在就是这样用的。我有一个 mixin 函数，我在其中为数据表构建了一个过滤器数组，为此，我只需将整个 API 响应传递给 mixins 中的函数。甚至可以在方法之间的 mixin 内部传递参数。我会将其编辑为我的答案。
考虑一个 mixin，其中设置了一个变量并对服务器进行异步调用。从 vue 组件中，mixin 变量设置为“1”，并执行异步服务器调用。如果 vue 组件再次调用 mixin（在服务器响应之前）并将变量设置为“2”并执行异步服务器调用。如果返回第一个服务器调用，则变量不再是“1”，而是“2”。如果 mixin 是一个对象，则情况并非如此，因为有 2 个不同的实例，第一个实例将变量设置为“1”，直到调用析构函数。一开始我没有注意到它

【解决方案3】：

mixin 在这种情况下没有用，因为 mixin 的实例不能超过一个。这就像将 mixin 中的代码复制并粘贴到另一个文件中一样。

Vue 组件之间的代码共享可以由许多具有标准 js 类的保存器完成。所需要的只是使用export default class 声明该类。

【讨论】：

@0x6368656174 这是正确的答案。加倍努力