每个组件都有data 函数methods 作为声明的一部分。
data是一个函数，返回一个对象。
为什么数据必须在组件中声明？
每个组件都有一些要在浏览器中显示的数据，所以data function 代码会返回这些数据。这些数据将被全局的组件方法所访问。
数据功能是否包含从数据库获取的API逻辑？不，获取数据的逻辑应该在组件的方法部分处理。
什么时候调用data函数？ Vue在创建组件实例时调用data函数，并返回一个对象，这些数据包括在Vuejs的reactive中，并将实例数据存储为**$data**对象。
关于数据函数的要点
- 它可以是箭头函数或数据属性或普通的ES5函数
- 它应该总是返回一个对象
- 对象属性是可用的，可以使用组件实例进行访问
- 方法可以在数据函数中被调用
- 返回的对象包含属性、键和函数调用
Vue.component('About', {
template: 'About Component',
data: function() {
return {
faq:"Vuej component faqs" }
}
});
以下是在vue组件中声明数据函数的不同方法
- 使用ES6箭头函数的数据
- 数据对象的返回
- 数据ES5风格函数
在这篇博文中，我们将通过实例来学习在vuejs组件中定义数据函数的多种方法。
vuejs中的数据箭头函数
箭头函数是在ES6 JavaScript语言中引入的。Vue组件可以用数据箭头函数来声明，如下图所示
箭头函数是使用()=> 语法进行声明的新方式。这些函数内部没有this context。这是什么意思呢？在函数中，this.HelloWorld道具对象没有返回组件道具，**this** 代表当前window 范围而不是组件范围，this.commonenent向控制台抛出以下错误，因为这些都是绑定到父级上下文的。
未发现的类型错误：无法读取未定义的属性'InputBlurExample'。
export default {
props: ['HelloWorld'],
data: () => ( {
name: 'Franc',
data: this.HelloWorld // undefined
})
}
return关键字返回数据函数中的对象
同样的方式可以使用隐式返回语法返回
export default {
props: ['HelloWorld'],
data: () => ({
name: 'Franc',
data: this.HelloWorld // undefined
})
}
无函数的数据对象
声明了数据对象而不是函数，并且初始化为0值，数据中的属性被多个组件实例共享。
如果这些组件在五个地方使用，每个组件的值都是不同的，这是什么问题？这就是唯一的缺点。
export default {
props: ['HelloWorld'],
data:{
increment:0,
}
}
数据功能对象
每个组件都共享数据对象，如果你把数据声明为函数，就很容易改变状态。
export default {
props: ['HelloWorld'],
data: function(){
return {increment:0},
}
}
这就是ES5在javascript中声明函数的方式。
同样可以用少量的编码来修饰
export default {
props: ['HelloWorld'],
data: {
return {increment:0},
}
}
如何在data函数中调用方法
data函数返回的对象包含的函数可以是实例方法
当你在父子组件中调用其他组件的事件处理程序时，这将非常有用。
在data函数中，将当前使用的vue组件实例存储在一个变量中，然后调用该方法。
export default {
name: "InputComponent",
data() {
var self = this;
return {
onClick: function () {
self.mymethod();
},
};
},
methods: {
mymethod: function () {},
},
};
总结
在这篇博文中，你学到了多种方法来创建一个数据函数并返回一个对象。
我希望你通过这个学到了新的东西。
