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

Question

回到我的时代，我们有一个叫做包含或导入或其他的疯狂的东西。这意味着您在一个文件中编写了一些代码，然后在不同的文件中重复使用它。因此，您将在文件 x 中创建一个 class，将此文件包含在另一个文件 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 class 并尝试导入它？

感谢您的帮助。

Answer 1

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

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

Answer 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");
    }
}

Answer 3

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

Vue 组件之间共享代码可以由许多使用标准 js classes 的储户来完成。所需要的只是用 export default class.

声明 class

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

share a js-class between .vue files

javascript

vue.js

vue-component