具有部分可重用性的 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']
});
我正在开发一个包含遗留代码的大型应用程序。我已经 运行 两次解决这个问题,我意识到一定有比我已经解决的更好的解决方案。问题如下
我需要在 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']
});