Home >Web Front-end >Vue.js >What is the difference between data and props in vuejs
The difference between data and props in vuejs: 1. Data does not require users (developers) to pass values and maintains itself; props requires users (developers) to pass values. 2. The data on data is both readable and writable; while the data on props can only be read and cannot be reassigned.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
In the process of using Vue.js
, we often encounter data
and props
. Let’s explore the differences between the two today.
data
Object
| Function
Function
Vue
instances. Vue
will recursively convert the properties of data
to getter/setter
, so that the properties of data
can respond to data changes. The object must be a pure object (containing zero or more key/value
pairs): a native object created by the browser API
, and properties on the prototype will be ignored. Roughly speaking, data
should only be data - observing objects with stateful behavior is not recommended. var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } })
props
|
Object
Can be an array or object that receives data from the parent component.
props Can be a simple array, or use an object instead, which allows configuring advanced options such as type detection, custom validation, and setting default values.
Example: // 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // 对象语法,提供验证 Vue.component('props-demo-advanced', { props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } } })
dataNot required Users (developers) pass values and maintain themselves
propsRequire users (developers) to pass values
Programming Learning ! !
The above is the detailed content of What is the difference between data and props in vuejs. For more information, please follow other related articles on the PHP Chinese website!