Question

我正在开发一个包含遗留代码的大型应用。我现在两次遇到这个问题并且意识到必须有一个比我解决它更好的解决方案。问题如下。

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

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

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

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

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

我已经尝试过在这三个独立组件中嵌入相同子组件的方法，但由于每个文件中HTML / Blade的不同，我不知道这是怎么回事。

任何建议都会非常感激，因为我觉得我复制了过多的Vue代码！

Answer 1

感谢用户感谢您在上述评论中提供解决方案。 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']
});

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

1 个答案: