vue 官方文档中你没注意到的知识点

prop 传入一个对象的所有属性

例如，对于一个给定的对象 message :

message: { 
  github: 'https://github.com/yeyi361936738/notebook',
  name: 'YEYI'
}
复制代码

下面的模版：

<component v-bind='message'></component>
复制代码

相当于：

<component
  v-bind:github='message.github'
  v-bind:name='message.name'
>
</component>
复制代码

prop 单向数据流

所有的 prop 使得父子组件之间形成了一个单向乡下绑定。 父级组件 prop 更改会向下流入到子组件中，子组件的数据也会更新。反之，则不行，控制台将会报错。

以下是两种常见的需要改变 prop 值的情况

1. 这个 prop 用来传递一个初始值，这个子组件接下来希望将其作为一个本地 data 使用。 这种情况下，可以定一个本地的 data 并将这个 prop 赋值。

props: {
  initValue
}
data(){
  return{
      value: this.initValue
  }
}
复制代码

2. 这个 prop 以原始值传入且需要转化。 这种情况下，使用 computed 来转化 prop。

props: {
  initValue
}
computed: {
  value: () => {
    //进行数据转化
    return this.initValue.split(' ')
  }
}
复制代码

注意点: JavaScript对象是通过引入的方式传入的，更改 prop 传入的对象属性，父组件也会改变。因此对象需要进行深拷贝。

prop 验证

自定义验证函数

props: {
  propA: {
    initValue: (value) => {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}
复制代码

类型检查，自定义构造函数

类型检查 type 可以是下列原声构造函数中的一个:

• String
• Number
• Boolean
• Array
• Function
• Object
• Symbol
• Date

额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列县城的构造函数：

function Person(firstname, lastname){
  this.firstname = fistname
  this.lastname = lastname
}
复制代码

你可以使用：

Vue.component('component', {
  props: {
    author: Person
  }
})
复制代码

来验证 author 是否是通过 new Person 构造的。

未完待续，持续更新中。