015 vue组件中的数据

组件创建存在的一些问题:

            1. 在创建组件时,我们希望组件可以保存一定的数据,并且组件模板中嵌入这些数据实现动态改变组件内容

            2. 但是,组件是不能访问Vue实例中的data的

            3. 因此,我们需要组件也有存放自己数据的地方

 

在组件中保存数据

            1. 组件注册时,与template并列等级的有一个data属性(也可以有methods等属性,后面会用到)

            2. data属性必须是一个函数

            3. 该函数返回一个对象,该对象中保存着数据

 

为什么在组件中data属性必须是一个函数而不是对象?

            案例:

                1. 当前存在一个计数组件,可以通过两个按钮实现计数的增加和减少,计数值保存在当前组件的data属性中

                2. 在一个Vue实例中,多次使用该计数组件,在每个组件中,均可以通过各自的按钮改变计数值

                3. 如果data属性是一个对象,则所有的组件会共用同一个对象,一个组件中改变计数值,别的组件也会同步改变

                4. 如果data属性是一个函数,函数返回一个对象,则每次调用函数返回的对象之间是相互独立的。

posted @ 2020-03-27 16:01  CarreyB  阅读(110)  评论(0编辑  收藏  举报