父模版中 使用单向数据绑定将需要传递的数据绑定到子模版的自定义属性上 子组件添加 props 选项来接收自定义的属性 在子模版中直接使用自定义属性来使用数据

props

  • 类型： Array<string> | Object
  • 详细：

props 可以是数组或者对象，用于接收来自父组件的数据。如果是数组即只接收数据不进行验证，如果是对象，允许配置高阶选项，如类数组检测、自定义验证和设置默认值

  • 案例：让Son子组件拿到Father父组件中的数据Hongbao(父亲给儿子生活费) ```html

  2. - validator属性验证检验函数
  3. ```javascript
  4. // 简单语法
  5. // props: ['money'] // 只接受不验证
  7. // 对象语法，提供检验
  8. // props: {
  9. //     money: Number // 数据类型检验
  10. // }
  12. props: {
  13.     money: {
  14.         type: Number,
  15.         validator: value => { // 数据类型检验 + 其他检验
  16.             if (value < 300) console.log('钱不够')
  17.         }
  18.     }
  19. }
  • 拓展：

你可以基于对象的语法使用以下选项：

  • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
  • default：any 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回
  • required：Boolean 义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
  • validator：Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。