从vue源码看props的用法

从Vue源码到具体的组件使用，props的定义，传递和验证有哪些步骤？如何通过源码学习的方式，深入了解 Vue 的 props 系统？

Props 概述

在 Vue.js 中，父组件向子组件通信是通过 prop 进行的。prop 是子组件声明接受的外部参数，其在组件中通过 this.$props 访问。

Props 定义

在组件中，我们可以通过 props 属性来指定我们的组件需要哪些参数。定义方式有以下几种：

字符串数组

props: ['title', 'content']

上述方式等价于指定了两个 prop 属性：

props: {
  title: {},
  content: {}
}

之后在组件中就可以通过 this.title 和 this.content 访问这两个属性。

对象格式

props: {
  propA: String,
  propB: [String, Number],
  propC: {
    type: String,
    default: 'default value',
    required: true,
    validator: function(value) {
      return value.length > 10;
    }
  }
}

其中，propA 的类型必须是字符串，propB 类型可以是字符串或数字，propC 是一个包含了类型（String）、默认值（'default value'）、必须性（必须存在）和验证器（value.length > 10）的选项对象。验证器必须是一个函数，其返回 true 时表示验证通过。

子组件访问 Props

访问 props 可以通过 this.$props 或 this.xxx 方式来实现，xxx 是在 props 中定义的属性。

<template>
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</template>

<script>
export default {
  props: ['title', 'content'],
  mounted() {
    console.log(this.$props); // { title: 'Hello World', content: 'This is a demo.' }
    console.log(this.title); // 'Hello World'
    console.log(this.content); // 'This is a demo.'
  }
};
</script>

Prop 验证

我们可以通过验证器函数、默认值或者类型验证来保证 prop 的正确性。

props: {
  propA: {
    type: Number,
    required: true,
    validator: function(value) {
      // 如果验证失败，返回 false，否则返回 true
      return value >= 0 && value <= 100;
    }
  },

  propB: {
    type: String,
    default: 'default value'
  },

  propC: {
    type: String,
    validator: function(value) {
      return ['success', 'warning', 'error'].indexOf(value) !== -1;
    }
  }
}

如上述代码，它指定了 propA 的类型必须为数字，propB 的默认值为 'default value'，propC 的值必须在 ['success', 'warning', 'error'] 中出现。如果 prop 不满足类型校验、默认值或验证函数的校验时，则会出现警告。

示例一

下面是一个示例代码，展示了如何在组件中定义一个 prop 并在组件中访问它。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

示例二

下面是一个示例代码，展示了如何使用类型检查器设置具有默认值的 prop。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  }
}
</script>