★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app的父与子页面传递参数之属性Props字段类型讲解

 2020/9/25 22:35:17  字体:  浏览 820 我要评论

Vue.component('myComponent', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    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 value > 10
      }
    }
  }
})


type 可以是下面原生构造器:

String
Number
Boolean
Function
Object
Array
Symbol
type 也可以是一个自定义构造器函数,使用 instanceof 检测。


// 自定义Person构造器
function Person(name, age) {
    this.name = name
    this.age = age
  }
  Vue.component('my-component', {
    template: `<div>名字: {{ person-prop.name }}, 年龄: {{ person-prop.age }} </div>`,
    props: {
      person-prop: {
        type: Person     // 指定类型
      }
    }
  })
  new Vue({
    el: '#app2',
    data: {
      person: 2        // 传入Number类型会报错
    }
  })

相关阅读
( 2021/1/19 22:10:48 )一次自动化批量处理服务器上几万张图片
( 2021/1/8 21:47:38 )uni-app三目运算class和style
( 2021/1/5 20:10:06 )uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
( 2021/1/5 19:50:31 )微信小程序开发中链接navigateTo与redirectTo的对比说明
( 2020/12/27 21:57:47 )使用uni-app开始小程序使用腾讯视频插件vid播放视频
( 2020/12/18 14:43:35 )微信小程序-接入广告
( 2020/12/18 14:13:25 )uni-app微信小程序获得用户头像与名称
( 2020/12/18 14:10:56 )微信公众号生成带参数的二维码asp源码下载
共有0条关于《uni-app的父与子页面传递参数之属性Props字段类型讲解》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
uni-app微信小程序获得用户头像与名称
微信小程序转uni-app项目
支持win7的nodejs版本
uni-app浏览历史记录功能实现
uni-app 搜索、历史记录功能简单实现
更多>>最新添加文章
一次自动化批量处理服务器上几万张图片
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
使用uni-app开始小程序使用腾讯视频插件vid播放视频
微信小程序-接入广告
uni-app微信小程序获得用户头像与名称
微信公众号生成带参数的二维码asp源码下载
更多>>随机抽取信息
ASP常用内置函数(下)
javascript日期验证比较
asp版图形验证码,可自定义点阵信息,支持字符扭曲、倾斜、倾斜
一些平时用到HTML的过滤
png显示叉号的解决办法(IE无法显示PNG格式图片的解决办法)
利用DIV+CSS制作浮动广告
photoshop cs 3D变换滤镜下载
让DIV固定在浏览器窗口的底部(兼容IE6)