Vue之Props再相遇

Vue之Props再相遇

今天我们来总结一下vue 中关于父子组件传值中使用到的 props 。
简单回顾一下父组件向子组件传值，在父组件中引用子组件的标签里绑定一个参数，然后子组件在props 中进行接收，接收的参数与父组件绑定的参数同名。

最简单的用法，就是以字符串数组的形式列出prop:

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

当然我们也可以指定每个prop的值类型，我们可以形象的列出prop

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

注意：这里存在一个单向数据流的问题：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
简单的理解就是：子组件中接收到的prop可以随着父组件的参数动态改变，但是子组件却不能修改接收到的prop。

为了定制prop的验证方式，你可以为props中的值提供一个带有验证需求的对象，而不是字符串数组啦

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    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 ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

这里的required、default等都是可以附加的条件。