26vue学习——组件中的 data 和 methods

26vue学习——组件中的 data 和 methods

前言

在 vue 实例的内部有自己的 data 和 methods，那么在组件是不是也有自己的 data 和 methods 呢？答案是肯定的。接下来让我们来看看如何定义组件的 data 和 methods 吧。

组件中的 data 和 methods

定义方法：
讲解：组件可以有自己的 data 数据，组件的 data 和实例的 data 有点不一样
（1）实例中的 data 是一个对象
（2）组件中的 data 必须为一个函数，data 函数必须返回一个对象
（4）组件中的 data 和实例中的data的使用方法一致
（5）组件中的 methods 和实例中的 methods 中的定义和使用方法一致

那为什么组件中的 data 必须为一个函数呢？下面以一个计数器组件来解释一下

（1）我们将 data 返回的对象在外部定义好才在函数中返回
代码：

结果：
z’W’q
解析：我们可以看到两组组件的引用使用的是相同的 data ，也就是如果我们的组件的 data 不是一个函数的话，每一个引用该组件都是共有相同的 data 里面的值的。为了避免这种现象，才强制规定组件的 data 必须为一个函数，且必须返回一个在内部定义的对象。

（2）data 返回的对象在函数内部定义好的
代码：

结果：

解析：这里不同的组件引用使用的 data 数据便是不同的，这是因为每一个组件的引用都会执行一次 data 这个函数，所以才会有自己的 data 数据