<div id="app">
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click = "increment">
<h3>{{ count }}</h3>
</div>
</template>
<script>
Vue.component('counter',{
template: 'tmpl',
data: function () {
return { count: 0}
},
methods: {
increment() {
this.count++
}
}
})
var vm = new Vue({
el: '#app',
data: {}
})
</script>
总结
- 组件可以有自己的data数据
- 组件的data和实例的data区别在于,实例中的data可以为一个对象,但组件中的data必须是一个方法
- 组件中的data除了必须为一个方法之外,方法内部还必须返回一个对象
- 组件中的data数据使用方式和实例中的data使用方式完全一样