什么是 props

• props (全称 properties 属性)，是组件传递值的标准语法形式
• props 为父组件传递给子组件的属性
• 使用 props 可以让子组件实现定制化显示

props 的基本使用

• 直接使用数组写法 (不建议使用)

import { defineComponent } from 'vue';
  
export default defineComponent({
  name: 'Comp',
  props: ['a', 'b', 'c']
});

• 类型对象

import { defineComponent } from 'vue';
  
export default defineComponent({
  name: 'Comp',
  props: {
    a: Number,
    b: Object,
    c: Number
  }
});

补充：

• props 可以接收的类型
  • 原生构造函数
    • String
    • Number
    • Boolean
    • Symbol
    • Array
    • Object
    • Function
    • Promise
    • Map
    • Set
    • ...
  • 自定义构造函数 (...)

props的特点以及注意点

1. props 是单向数据流动的

什么是单向数据流？

• 单向数据流: 一种组件化中的数据流规范
• 单向数据流的数据总是从父组件向子组件流动
• 在单向数据流中子组件不可以修改父组件中提供的数据 (权限规范)(副作用)

2. v-bind与 props

   • 不使用v-bind传递 props 值时, props传递过来的值均为字符串

   • 使用v-bind传递props值时, props的值为一个js变量或者js表达式

   • 当传递的值非常多时, 使用v-bind="subProps" (v-bind="object" (不建议写成(:="subProps")))

3. props 的优先级高于 data

   • 可以使用 props 给 data 中的字面量赋值
   • 可以使用 props 给 computed 计算值

4. Vue推荐的props写法

   • 1. 参考 Web Component (props 使用 kebab-case)
   • 2. 定义尽可能详细 (仅代表笔者观点)

props 验证

• props: null | undefined 可以通过任何的 props 的类型检查 ( Vue 的放宽检查)

• props 可以使用联合/多个数据类型的检查

  • status: [Number, String]

• props可以设置默认值

export default {
  props: {
    content: {
      type: String,
      default: 'default content'
    }
  },
};

注意:

1. 设置引用值(Array, Object, Function, Map, Set, Promise, ...)的默认值不能直接设置, 需要设置为一个函数 (和data为function的道理一样)
2. props的定义在data之前, 默认引用值函数内不能访问vm上面的大部分值(data, computed), 所以default函数需要尽可能少的功能
3. 属性值验证 (自定义验证函数 validator)
   • props中的校验可以写到外面去 (抽离切割组件)