015 vue组件中的数据
组件创建存在的一些问题:
1. 在创建组件时,我们希望组件可以保存一定的数据,并且组件模板中嵌入这些数据实现动态改变组件内容
2. 但是,组件是不能访问Vue实例中的data的
3. 因此,我们需要组件也有存放自己数据的地方
在组件中保存数据
1. 组件注册时,与template并列等级的有一个data属性(也可以有methods等属性,后面会用到)
2. data属性必须是一个函数
3. 该函数返回一个对象,该对象中保存着数据
为什么在组件中data属性必须是一个函数而不是对象?
案例:
1. 当前存在一个计数组件,可以通过两个按钮实现计数的增加和减少,计数值保存在当前组件的data属性中
2. 在一个Vue实例中,多次使用该计数组件,在每个组件中,均可以通过各自的按钮改变计数值
3. 如果data属性是一个对象,则所有的组件会共用同一个对象,一个组件中改变计数值,别的组件也会同步改变
4. 如果data属性是一个函数,函数返回一个对象,则每次调用函数返回的对象之间是相互独立的。