<div id="app">
<basic-component :title.sync="title" :is-active.sync="isActive"></basic-component>
</div>const BasicComponent = {
template: `<div @click="clickHandler">
BasiceComponent
<br />
{{ title }}
<br />
{{ isActive }}
</div>`,
props: {
title: {
tpye: String,
require: true
},
isActive: {
type: Boolean,
require: true
}
},
methods: {
clickHandler () {
this.$emit('update:title', 'New World')
this.$emit('update:isActive', !this.isActive)
}
}
}
Vue.component('basic-component', BasicComponent)
new Vue({
el: '#app',
data: {
title: 'Hello world',
isActive: false
}
})
External CSS
This Pen doesn't use any external CSS resources.