具有部分可重用性的 Vue 组件

Vue components with partial reusability

我正在开发一个包含遗留代码的大型应用程序。我已经 运行 两次解决这个问题,我意识到一定有比我已经解决的更好的解决方案。问题如下

我需要在 3 个单独的页面中添加非常相似的 Vue 功能。但是,这些页面具有明显不同的 HTML/Blade 模板。因此,就像除了组件道具之外,我还必须将单独的 HTML/Blade 模板传递给组件。

我可以使用 Vue 内联模板来完成此任务,它可以解决显着不同的 HTML/Blade 模板问题。

但是,剩下的问题是我有 3 个 .js Vue 组件,每个页面一个。这很好,除了每个文件中的 Vue 代码非常相似。

也有可能在某个时候我需要向每个组件添加更多独特的 Vue 代码,并且希望保持这种可能性。

我想做的是找到一种方法来重用每个组件中非常相似的 Vue 代码。

我曾尝试想办法在这 3 个单独的组件中的每一个中嵌套相同的子组件,但由于每个组件中 HTML/Blade 的差异,我看不出这是怎么可能的文件。

非常感谢任何建议,因为我觉得我重复了太多的 Vue 代码!

感谢用户 thanksd 在上面的评论中提供了解决方案。 Mixins 确实是适合我的方式。那样,而不是这样:

Vue.component('first-component', {
    template: // something unique
    methods : {
        functionNumber1: function () {
            // do something
        },
});

Vue.component('second-component', {
    template: // something totally different
    methods : {
        functionNumber1: function () {
            // do same something
        },
    }

});

我基本上可以做到这一点:

const myMixin = {
    methods : {
        functionNumber1: function () {
            // do same something
        },
}

Vue.component('first-component', {
    template: // something unique
    mixins: ['myMixin']
});

Vue.component('second-component', {
    template: // something totally different
    mixins: ['myMixin']
});