JSFiddle - React, Tailwind, and code Playground
HTML
<pre id="vue">
{{$data}}
</pre>
JavaScript
const mixin1 = {
data(){
return {
mixin1:'woot'
}
},
methods:{
hello1(){
console.log('Hello 1')
}
}
}
const mixin2 = Vue.util.mergeOptions(mixin1, {
data(){
return {
mixin2:'woot'
}
},
methods:{
hello2(){
console.log('Hello 2')
}
}
})
const mixin3 = {
mixins:[mixin2],
data(){
return {
mixin3:'woot'
}
},
methods:{
hello3(){
console.log('Hello 3')
},
helloAll(){
this.hello1()
this.hello2()
this.hello3()
}
}
}
new Vue({
el:'#vue',
mixins:[mixin3],
data(){
return {
component:'woot'
}
},
created(){
this.hello3()
}
})