Prop学习

Prop学习

Prop使用形式(字符串数组、对象)

1.以字符串数组形式列出prop

props:['title', 'likes', 'isPublished', 'commentIds', 'author', 'callback', 'contactsPromise']

2.以对象形式列出prop，可以对prop属性指定值类型；如果属性可能有多个类型，可以用数组的方式列出；可以对该属性设置默认值(如果是数组跟对象，必须从一个工厂函数获取)；可以设置该属性为必填;可以自定义校验函数

props:{
  title: [String, Number],
  likes: {
  	type: Number,
  	default: 10
  },
  isPublished: {
  	type: Boolean,
  	required: true
  },
  commentIds: {
	type: Array,
	default: function() {
		return ['a', 'b']
  },
  author: {
	type: Object,
	default: function() {
		return {
			a: 'hello',
			b: 'world'
		}
  },
  callback: {
  	validator: function(value) {
  		// 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
  	}
  },
  contactsPromise: Promise // or any other constructor
}

Prop单向数据流

每个prop都在其父子之间形成一个单向下行绑定，父级prop更新会向下流入子组件中，反之则不行。也就是说当父级prop更新时，子组件也会跟着更新；而当子组件对prop进行操作时，Vue 会在浏览器的控制台中发出警告。
如果想要将prop传的值当做本地数据来使用，最好是在本地data定义一个属性，并将prop作为初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

当prop值当做原始数据传入且需要进行转换时，最好使用计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

在prop的数组和对象是通过引用传入的，指向的是一片内存地址，直接将prop作为初始值给data赋值，在之后如果对该data属性进行操作，将会影响到父组件的状态，会导致浏览器报错。所以需要进行操作时，需要将prop值进行深拷贝。

通读Vue官方文档，传送至prop学习