专栏首页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 条评论
登录 后参与评论

相关文章

  • [Vue 牛刀小试]:第九章 - 组件基础再探(data、props)

      在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件。不知道你是否记得,在上一章中,我们提到组件是一个可...

    程序员宇说
  • 深入解读Vue修饰符sync

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”。   在vue 1.x 中的 .sync 修饰符所提供的功能。当一...

    我不是费圆
  • 老司机读书笔记——Vue学习笔记

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使...

    老司机Wicky
  • 2年vue项目实战经验汇总

    vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(elec...

    徐小夕
  • Vue.js属性装饰器库vue-property-decorator文档

    此库完全依赖于vue-class-component, 所以请使用此库前, 先阅读它的文档

    治电小白菜
  • Vue + TypeScript + Element 项目实战及踩坑记

    本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。

    夜尽天明
  • vue学习笔记

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项...

    用户6362579
  • Vue 学习笔记

    使用 vue-cli@3.x 构建自己的库时,因为又引入了第三方组件,打包后将代码合在了一起显得很大。 所以应当只打包自己的组件,而不打包内部引入组件的代码。(...

    云游君
  • [Vue 牛刀小试]:第十章 - 组件间的数据通信

      在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data、prop 选项。在之前的学习中有提到过,组件是 V...

    程序员宇说
  • 优雅的在vue中使用TypeScript

    近几年前端对 TypeScript 的呼声越来越高,Typescript 也成为了前端必备的技能。TypeScript 是 JS 类型的超集,并支持了泛型、类型...

    前端森林
  • Vue-router 学习笔记

    在以前,前后端是不分离的,这个阶段通常是由服务端渲染好页面(SSR),再发送页面给前端去展示;接着到了前后端分离的阶段,前端向静态资源服务器拿资源,再通过 js...

    Chor
  • vue学习笔记3

    什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;...

    用户6362579
  • vue学习笔记4

    考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)

    用户6362579
  • vue学习笔记2

    概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在...

    用户6362579
  • Vue 3.0前的 TypeScript 最佳入门实践

    然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...…真香!

    前端劝退师
  • Vue 3.0前的 TypeScript 最佳入门实践

    然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...…真香!

    Nealyang
  • 『 Vue 小 Case 』- 别被字面量 Prop 坑了

    用过 Vue 的各位,对于 Prop 一定不会陌生,相信大家都能够信手拈来。但就是这么一个大家都熟悉的 Prop,有时候也会把我们坑了。在介绍这个坑之前,我们先...

    歪马
  • vue 随记(1):数据劫持

    要求:点击加减号,输入框内容自动增加或减去1,输入时允许数字,当数字变动时,自动更新下面的r平方和r立方的内容。

    一粒小麦
  • Vue.js 十五分钟入门

    TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。

    Fundebug

扫码关注云+社区

领取腾讯云代金券