<div id="app">
<basic-component v-model="test"></basic-component>
{{ test }}
</div>const BasicComponent = {
template: `<div @click="clickHandler">
BasicComponent
</div>`,
props: {
active: {
type: Boolean,
default: false
}
},
model: {
prop: 'active',
event: 'component-event'
},
methods: {
clickHandler () {
this.$emit('component-event', !this.active)
}
}
}
Vue.component('basic-component', BasicComponent)
new Vue({
el: '#app',
data: {
test: false
},
methods: {
eventHandler () {
console.log('this is a component event')
}
}
})
External CSS
This Pen doesn't use any external CSS resources.