位置: 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的网络编程)

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

  • 销项税减去进项税
  • 发放福利视同销售进项税要转出吗?
  • 吴中区个体户如何办理
  • 汇算清缴申报的时候资产总额带不出来
  • 建筑发票开具与土增税扣有什么关系?
  • 如何做好存货管理,从哪方面去做
  • 应收账款平均余额公式
  • 补缴房产税有滞纳金吗
  • 一般纳税人用金蝶新建账套用什么会计制度好
  • 增值税加计扣除账务处理
  • 合作建房如何纳税
  • 不动产初始登记流程
  • 公司购入长期债务怎么算
  • 银行对个人借款的处理
  • 融资租赁承租人和出租人的会计处理
  • 企业内部员工稿费
  • 股权继承印花税单方交
  • 未报税会怎么样
  • 怎么看公司行不行
  • 工会经费向地方税务局缴纳的比例是多少
  • 公司房租可以抵多少税
  • 集团公司奖励发放遵循什么原则
  • 物流车辆挂靠账务怎么处理?
  • 分期消费的实际收益
  • 集体企业属于事业单位吗
  • 查账征收企业所得税季报怎么填
  • 增值税专用发票的税率是多少啊
  • 属于项目的一个实例
  • linux ssh命令用法
  • 奖金扣税标准税率表
  • 出纳有哪些清点项目
  • 电脑管家使用教程
  • 还款本息和本金哪个划算
  • php-mbstring
  • 医保和养老保险一样吗
  • 购进商品怎么做会计分录
  • 施伦贝格尔
  • vue数据更新会触发什么生命周期
  • yolov5 教程
  • vue props emit
  • 企业所得税如何计算应纳税所得额
  • 小狐狸吧
  • php操作json文件
  • 代扣代缴的附加税怎么入账
  • vue在项目中怎么用的
  • mount.nfs an incorrect mount
  • 权益法的比例是多少
  • 预先支付的房租
  • 印花税的缴税对象是
  • 兼职费用怎么入账报销
  • sql 生成新表
  • 当月开票可以当月勾选吗
  • 一般纳税人可以开3%的发票吗
  • 残疾人保障金为负数
  • 社保费单位减免
  • 土增清算可以扣除项目
  • 商品没入库直接发货
  • 法人存入公户的钱摘要
  • 公司缴纳印花税如何缴纳
  • 固定资产卡片项目的数据类型包括
  • 公益捐赠仪式流程
  • 海关发票丢失怎么处理
  • mysql三层架构
  • linux中yum的使用
  • linux 的ll
  • xp系统换成win10
  • 64位win10预览版10565更新补丁KB3105208后蓝屏怎么办?
  • windows7功能打不开怎么办
  • win10app商店
  • win7桌面小工具如何设置使用
  • win8启动蓝屏
  • texture packer工具
  • bash 入门
  • python基础教程电子版
  • javascript语言基础
  • unity引擎工具
  • javascript中Date format(js日期格式化)方法小结
  • 国税局登录密码修改
  • 公司被税务查账对不上
  • 福建福州有几个火车站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设