专栏首页Android干货vue学习笔记-prop

vue学习笔记-prop

用于组件

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

说明这个组件有'title', 'likes', 'isPublished', 'commentIds', 'author'这几个attribute 

以下说明组件有title,likes等等属性,并且指定对应属性的类型,当给到错误类型的值时控制台会报错

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

props支持的类型

String
Number
Boolean
Array
Object
Date
Function
Symbol

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
      }
    }
  }
})

/***********************************prop延伸*****************************************/

一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。

比如:

一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件,

这个插件需要在其 <input> 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后这个 data-date-picker="activated" attribute 就会自动添加到 <bootstrap-date-input> 的根元素上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android Studio: Error:Cannot locate factory for objects of type DefaultGradleConnector, as Connector

    听着music睡
  • 安卓开发_浅谈SubMenu(子菜单)

    听着music睡
  • vue学习笔记-常用指令

    只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    听着music睡
  • 如何掌握高级react设计模式: Render Props【译】

    原文链接:How To Master Advanced React Design Patterns: Render Props

    IMWeb前端团队
  • 浅谈重构造成的灾难性毁灭

    这章我在7月20号的时候就准备好了标题,在那之前有写过一篇重构的文章,这段时间一直在等重构造成的弊端。

    CrazyCodes
  • 喂喂,我可也是铂金,请多看我一眼|冷门铂金VR游戏盘点

    VRPinea
  • 谷歌大脑AI飞速解锁雅达利,训练不用两小时:预测能力“前所未有”

    谷歌大脑给自家的强化学习AI,建造了一个有的放矢的高效学习环境:基于视频预测的模拟器SimPLe。

    量子位
  • 玩转 PhpStorm 系列(六):代码重构篇

    在 PhpStorm 中,我们可以通过自带的重构功能(Refactor)非常方便地对代码进行重构,从而提升代码复用性。

    学院君
  • DS 1302时钟芯片的51单片机程序设计

    DS1302是美国推出的一片带有RAM的实时时钟芯片,它能对年月日周,时分秒进行技术,具有闰年补偿那功能,动作电压2.5-5.5V,采用三线接口和MCU连接。计...

    单片机技术宅
  • 《R语言游戏数据分析与挖掘》新书推荐

    作者:谢佳标 微软中国MVP,多届中国R语言大会演讲嘉宾,目前在创梦天地担任高级数据分析师一职, 作为创梦天地数据挖掘组的负责人,带领团队对游戏数据进行深度挖掘...

    小莹莹

扫码关注云+社区

领取腾讯云代金券