While I've come across documentation on the following implementation, I find myself struggling to visualize how it can be executed.
// A more advanced alternative!
var myGreatMixin = {
// ...
methods: {
publicMethod() {
// ...
myPrivateFunction()
}
}
}
function myPrivateFunction() {
// ...
}
export default myGreatMixin
The dilemma lies in managing multiple mixins within a component and determining the best practices/conventions to follow.
I grasp how this method could potentially resolve the aforementioned issue.
var myGreatMixin = {
// ...
methods: {
$_myGreatMixin_update: function () {
// ...
}
}
}
However, I'm still perplexed about implementing the even better approach within a component.
Here's a speculative solution - unsure if it's viable?
// myMixin
const method1 = () => console.log('method1 firing')
export default {
methods: {
$_myMixin() {
return {
method1
}
}
}
}
// component
mixins: [myMixin],
data: () => ({
myMixinMethods: {}
}),
created() {
this.myMixinMethods = this.$_myMixin()
},
mounted() {
this.myMixinMethods.method1()
}
This approach feels overly complex, prompting me to seek out additional insights. I stumbled upon an even better technique involving public/private methods, but its implementation remains unclear to me, particularly in addressing namespace conflicts with multiple mixins in a Vue component.