Vue-Prop

一、Prop的数据流

父子组件的关系：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。如图

组件数据流动

组件的作用域是孤立的。因此子组件的模板内不能直接饮用父组件的数据，必须通过prop传递到子组件内。

通过v-bind的方式绑定prop把父组件的数据向子组件传递。

但是如上图，prop是单向绑定的：当父组件的属性变化时，将会传递给子组件，但是反过来则不会；目的：防止子组件无意间修改了父组件的状态。

处理的方案：

1.在子组件内定义一个局部变量，并且用prop的值初始化：

props: ['initialCounter'],

data:function(){

return{counter:this.initialCounter }

}

2.定义一个计算属性，处理prop的值并且返回：

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意：

在JavaScript中对象和数组都是引用类型，指向的同一个内存空间，因此在prop为一个对象或者数组时，在子组件的内部改变它仍然会影响到父组件的状态

二、Prop验证

组件的prop指定验证规则，如传入的数据不符合要求，Vue会发出警告，对于开发他人使用的组件非常有用。

要指定验证规则，需要用对象的形式来定义prop，而不能用字符串数组：

Vue.component('example', {

props: {

// 基础类型检测 (`null` 指允许任何类型)

propA: Number,

// 可能是多种类型

propB: [String, Number],

// 必传且是字符串

propC: { type: String, required: true },

// 数值且有默认值

propD: { type: Number, default: 100 },

// 数组/对象的默认值应当由一个工厂函数返回

propE: {

type: Object,

default: function () {

return { message: 'hello' }

}

},

// 自定义验证函数

propF: {

validator: function (value) {

return value > 10 }

}

}

})