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

• Type: Object | Function
• Restrictions: The definition of the component only accepts data objects of 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.
  Example:

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

##Type:
• Array| Object
  props 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
      }
    }
  }
})

Copy after login

The difference between the two:

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!