位置: IT常识 - 正文

vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验(vue props emit)

编辑:rootadmin
vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验 vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验1、父子间传值父传子在子组件使用 props 选项接收父组件的数据。<!-- 父组件 --><template><div><com-child :value="父组件数据"></com-child></div></template>

推荐整理分享vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验(vue props emit),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue props对象默认值设置,vue props 默认值,vuejs props,vue props 默认值,vue props emit,vue如何修改props中的值,vue props 默认值,vue中props的默认写法和简写,内容如对您有帮助,希望把文章链接给更多的朋友!

2

<!-- 子组件 --><template> <div> {{value}} </div></template><script> export default { // 父传子数据特点 只读 props:['value'] //写法一 }</script>2、props写法汇总 // 写法一:常规写法props:['value'] //写法二:带有类型写法props: { fieldString: String, fieldNumber: Number, fieldBoolean: Boolean, fieldArray: Array, fieldObject: Object, fieldFunction: Function}// 写法三:带有类型和默认值写法 props: { fieldString: { type: String, default: '' }, fieldNumber: { type: Number, default: 0 }, fieldBoolean: { type: Boolean, default: true }, fieldArray: { type: Array, default: () => [] }, fieldObject: { type: Object, default: () => ({}) }, fieldFunction: { type: Function, default: function () { } } }2.1、props简略写法vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验(vue props emit)

一般情况下 props写法

props:{obj: { type: Object, default: () => {}},arr: {type: Array,default: () => []}}

但是,如果初始化的时候就使用里面的值,可能会出现没有该值的情况,此时就会报错。 应该使用以下有默认值的写法

props:{obj: { type: Object, default: function () { return {obje: ''} }},arr: {type: Array,default: function () { return [] }}}2.2、带有校验的写法

我们可以为组件的 prop指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。

这在开发一个会被别人用到的组件时尤其有帮助。

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 } } }3、示例

vue中prop会接收不同的数据类型**,这里列出了 常用的数据类型的设置默认值的写法,其中包含:Number, String, Boolean, Array, Function, Object。

refAge: {type: Number,default: 0 // 数字类型,默认0},refName: {type: String,default: '' // 字符串类型,默认''},hotDataLoading: {type: Boolean,default: false // 布尔类型,默认false},hotData: {type: Array,default: () => {return [] // 数组类型,默认[]}},getParams: {type: Function,default: () => () => {} // 函数类型,默认{}},meta: {type: Object,default: () => ({}) // 对象类型,默认{}}
本文链接地址:https://www.jiuchutong.com/zhishi/288145.html 转载请保留说明!

上一篇:谈谈linux网络编程中的应用层协议定制、Json序列化与反序列化那些事(linux的网络编程)

下一篇:如何通过无线路由器自身进行流量限制、局域网网速控制?(如何通过无线路由器连接打印机)

  • 钉钉直播回放老师知道你看了吗(钉钉直播回放老师删了怎么办)

    钉钉直播回放老师知道你看了吗(钉钉直播回放老师删了怎么办)

  • 华为p40的来电闪光灯如何设置(华为p40的来电闪光灯怎么设置)

    华为p40的来电闪光灯如何设置(华为p40的来电闪光灯怎么设置)

  • 淘宝的免密支付在哪里设置(淘宝的免密支付怎么取消掉)

    淘宝的免密支付在哪里设置(淘宝的免密支付怎么取消掉)

  • 苹果6s分屏功能怎么用(苹果6s手机分屏功能)

    苹果6s分屏功能怎么用(苹果6s手机分屏功能)

  • 为什么我的快手作品不能置顶(为什么我的快手作品播放量低)

    为什么我的快手作品不能置顶(为什么我的快手作品播放量低)

  • 用户正忙是什么原因(用户正忙?)

    用户正忙是什么原因(用户正忙?)

  • 华为p40pro原装膜要不要撕掉(华为p40pro原装膜多少钱)

    华为p40pro原装膜要不要撕掉(华为p40pro原装膜多少钱)

  • 照片共享是什么意思(照片共享是什么意思是分享给别人吗?)

    照片共享是什么意思(照片共享是什么意思是分享给别人吗?)

  • 用户数据是什么意思(用户数据是啥意思)

    用户数据是什么意思(用户数据是啥意思)

  • 华为nova7se截屏怎么弄(华为nova7se截屏长图)

    华为nova7se截屏怎么弄(华为nova7se截屏长图)

  • qq群可以多少人一起视频(qq群可以多少人一起语音聊天)

    qq群可以多少人一起视频(qq群可以多少人一起语音聊天)

  • 屏幕黑屏导出通讯录(屏幕黑屏怎么把手机里的文件导出来)

    屏幕黑屏导出通讯录(屏幕黑屏怎么把手机里的文件导出来)

  • qq共享位置怎么改变自己的位置(qq共享位置怎么改定位)

    qq共享位置怎么改变自己的位置(qq共享位置怎么改定位)

  • qq语音通话能看见对方吗(qq语音通话对方能看到我的屏幕吗)

    qq语音通话能看见对方吗(qq语音通话对方能看到我的屏幕吗)

  • imac可以当显示器用吗(imac2021可以当显示器用吗)

    imac可以当显示器用吗(imac2021可以当显示器用吗)

  • iphone8突然开不开机(ipone8突然开不了机了)

    iphone8突然开不开机(ipone8突然开不了机了)

  • iphonex屏幕分辨率(苹果x的屏幕分辨率多少)

    iphonex屏幕分辨率(苹果x的屏幕分辨率多少)

  • 宽带运营商提供的账号和密码是什么(宽带运营商提供的账号密码忘了怎么办)

    宽带运营商提供的账号和密码是什么(宽带运营商提供的账号密码忘了怎么办)

  • gt和gtx有什么区别

    gt和gtx有什么区别

  • 闲鱼买家延长收货最多几天(闲鱼买家延长收货卖家能看到吗?)

    闲鱼买家延长收货最多几天(闲鱼买家延长收货卖家能看到吗?)

  • 清空的聊天记录能恢复吗(清空的聊天记录还能找回来吗)

    清空的聊天记录能恢复吗(清空的聊天记录还能找回来吗)

  • vivo手机有个月亮标志(vivo手机有个月牙行的东西在哪里)

    vivo手机有个月亮标志(vivo手机有个月牙行的东西在哪里)

  • 3600带核显吗(r53600带核显吗)

    3600带核显吗(r53600带核显吗)

  • 拼多多砍价到后面都是0.01怎么办(拼多多砍价到后面为什么不加了)

    拼多多砍价到后面都是0.01怎么办(拼多多砍价到后面为什么不加了)

  • 电竞屏有必要吗(电竞屏需要更好的显卡吗)

    电竞屏有必要吗(电竞屏需要更好的显卡吗)

  • 计算机毕业设计——简单的网页设计(计算机专业的毕业设计作品新颖)

    计算机毕业设计——简单的网页设计(计算机专业的毕业设计作品新颖)

  • 生产成本怎么做
  • 增加固定资产原值账务处理
  • 公司筹建期间发生的费用怎么处理
  • 存货报废需要进项转出吗
  • 销售滞后是什么行为
  • 分税制的内容有哪些?
  • 结转完工入库产品成本计算
  • 差旅费包括哪些明细
  • 公户转到老板私人账户
  • 增值税发票抵扣进项税什么意思
  • 返利抵扣货款
  • 出口退税进项发票
  • 失控进项发票转出 补税做账
  • 国家税务总局关于取消增值税扣税凭证
  • 从租计征的房产税减半政策
  • 开具红字发票后发现购买方已做抵扣怎么办
  • 食堂非税收入怎么申报
  • 购买国债利息收入计入利润总额吗
  • 一般纳税人有进项无销项
  • 报税的销售额怎么改数字
  • 限额领料单是一种多次使用的
  • 技术发明案例
  • 金融负债包括哪几项
  • 事业单位自筹什么意思
  • 人工费没有发票年度汇算调增需要进行调帐处理吗
  • 在建工程明细科目设置
  • 外购货物用于职工福利进项税额可以抵扣吗
  • 查补的增值税能抵留抵吗
  • 固定资产增值税税率
  • 公司以知识产权出资纳税筹划
  • 库房存货标准
  • php数据类型分为哪几类
  • 纳税调整项目明细表30行怎么填写
  • 购入商品再卖出
  • php获取浏览器ua
  • 【小沐学C++】C++ MFC中嵌入web网页控件(WebBrowser、WebView2、CEF3)
  • 大前端最新
  • 前端进阶路线
  • java中通配符作用
  • 售后租回交易的资产销售价低于市场价承租人作为
  • 企业年度预算编制流程
  • 运营费的税率
  • 应收利息可以计入其他应收款吗
  • 物权变动的原因是什么
  • sql2008设置
  • 质量赔偿可以开什么费用发票
  • 企业变更法人的原因怎么写
  • 建筑安装工人住宿费会计分录
  • mysql8绿色版安装
  • 固定资产直接记入费用科目
  • 建筑业成本核算表格
  • 建筑租赁公司是什么意思
  • 老板自己的钱给公司
  • 企业缴纳车船税吗
  • 劳务所得税税率表2023年1月
  • 递延所得税负债会计分录
  • 你知道实施“营改增”对企业有哪些积极的效应么?
  • 车辆违章有几种处理方法
  • 新开公司没有领失业金
  • sql 修改表的字段名称
  • sqlserver sql日志
  • linux防御
  • Ubuntu下VirtualBox的vdi文件克隆方法
  • windows出现问题怎么处理
  • windows log在哪里
  • win10系统怎么调整输入法
  • Win10系统如何打开任务管理器
  • win8开机启动项
  • Win10用户狂喷微软:更新日志功能还没加上去
  • ExtJS 4.2 Grid组件单元格合并的方法
  • cocos2dx怎么用
  • 如何用jquery
  • 仿真安卓
  • unity物理引擎原理
  • nodejs实例教程
  • 猫的喵喵
  • js怎么设置css
  • jquery接收后端数据
  • android studio中r文件在哪
  • 国家税务定额发票票样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设