JSFiddle - React, Tailwind, and code Playground
HTML
<div id="car">
<component is="engine"></component>
<component is="transmission"></component>
</div>
JavaScript
/**
* Vue 1.x
*/
Vue.component('transmission', {
template: `
<div>{{name}}</div>
`,
data: function () {
return {
name: 'DQ200'
}
},
activate: function (done) {
console.log('transmission activate')
done()
}
})
Vue.component('engine', {
template: `
<div>{{name}}</div>
`,
data: function () {
return {
name: 'TSI'
}
},
activate: function (done) {
console.log('engine activate')
done()
}
})
new Vue({
el: '#car',
activate: function (done) {
console.log('car activate')
done()
}
})