Two separate components with shared logic and template, making it appear as though one is extending the other.
Think of Drop and Pick components in this manner:
// pick.js
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Pick extends Vue {
template: '<p>{{name}}</p>',
created() {
console.log('Hello Pick');
}
data: {
name: 'pick',
count: 0
},
methods: {
add: function () {
this.count++;
}
}
}
// drop.js
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Drop extends Vue {
template: '<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>',
created() {
console.log('Hello Drop');
}
data: {
name: 'drop',
isUserFriendly: false,
count: 0,
drops: 0
},
methods: {
add: function () {
this.count++;
this.drops++;
},
remove: function () {
this.count--;
},
}
}Initially, it may seem like Drop is extending Pick while adding extra functionality and modifying the template. However, forcing Pick to include information about isUserFriendly goes against the concept of unrelated context components.
This approach could lead to maintenance challenges down the line if more components are extended and shared logic increases.
Do you have any suggestions for a better solution? Is there another method that I am not familiar with?
Thank you for your input!