组件-为什么组件的data必须是一个function
通过观察发现,代码中的 date 必须为 fuction 且必须访问一个对象,下面将讲解这样定义的必要性:
一、组件data是function
1. 创一个组件
<script>
vue.component('counter',{
template:''
})
//这是一个计数器的组件,身上有个按钮,每当点击按钮,让data中的count值+1
2. 定义一个组件
<template id="tmpl"></template>
3. 把id给它
<script>
vue.component('counter',{
template:'#teml'
})
4. 在外面定义结果有代码提示,
<template id="tmpl">
<div>
<input type="button"value="+1"@click="increment">
<h3>{{count}}</h3>
</div>
</template>
5. 定义count和increment的方法,必须要定义function,不定义会报错
<script>
vue.component('counter',{
template:'#teml',
data:function(){
})
6.在外面定义一个对象
Var dataobj = {count:0}
7.内部return data
<script>
vue.component('counter',{
template:'#tmpl'
data:function(){
return dataobj
},
methods:{
increment(){
this.count++ //每当点击按钮就会触发increment,要实现data里count值加一
}
6.把count以标签形式引入app里
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
<hr>
</div>
点其中一个其他的也会变化,因为dataobj是一个对象,是引入类型的,在页面上放了三个counter组件,这三个组件内部返回的对象都指向count,三个组件共享同一个data属性,所以要:
data:function(){
//return dataobj
return{ count: 0}
},//互不影响