阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js props

      props

      • 类型Array<string> | Object

      详细

      props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

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

      示例

      // 简单语法
      Vue.component('props-demo-simple', {
        props: ['size', 'myMessage']
      })
      
      // 对象语法,提供验证
      Vue.component('props-demo-advanced', {
        props: {
          // 检测类型
          height: Number,
          // 检测类型 + 其他验证
          age: {
            type: Number,
            default: 0,
            required: true,
            validator: function (value) {
              return value >= 0
            }
          }
        }
      })
      

      参考

      Props

      目录
      目录