vuejs中data与props的区别是什么-Voir.js-php.cn

vuejs中data与props的区别：1、data不需要用户（开发者）传值，自身维护；而props需要用户（开发者）传值。2、data上的数据都是可读可写的；而props上的数据只可以读的，无法重新赋值。

vuejs中data与props的区别是什么

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

在使用Vue.js的过程中，经常会遇到data和props。今天就来探索一下二者的区别。

data

类型：Object|Function
限制：组件的定义只接受Function
Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value对)：浏览器API创建的原生对象，原型上的属性会被忽略。大概来说，data应该只能是数据 - 不推荐观察拥有状态行为的对象。
例：

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 } } })

Copier après la connexion

props

类型：Array|Object
props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
例：

// 简单语法 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 } } } })

Copier après la connexion