美文网首页
vue.js中的data和props的区别

vue.js中的data和props的区别

作者: 缺月楼 | 来源:发表于2019-11-08 09:52 被阅读0次

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

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

props

  • 类型:Array<string>| 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
      }
    }
  }
})

两者最大的区别 :

  • data不需要用户(开发者)传值,自身维护
  • props需要用户(开发者)传值

相关文章

网友评论

      本文标题:vue.js中的data和props的区别

      本文链接:https://www.haomeiwen.com/subject/vsmbbctx.html