广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue子组件内的props对象参数配置方法
  • 284
分享到

Vue子组件内的props对象参数配置方法

2024-04-02 19:04:59 284人浏览 安东尼
摘要

目录一、简单数据类型1、布尔类型 Boolean正确写法 :2、数字类型 Number正确写法 :3、字符串类型 String正确写法 :二、复杂数据类型1、数组 Array错误写法

这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义

Array、Object、或Function默认值的正确写法说明,具有很好的参考价值

一、简单数据类型

1、布尔类型 Boolean

正确写法 :

props: {
    demoBoo: {
      type: Boolean,
      default: true,
    },
  },

2、数字类型 Number

正确写法 :

props: {
    demoNum: {
      type: Number,
      default: 1,
    },
  },

3、字符串类型 String

正确写法 :

props: {
    demoStr: {
      type: String,
      default: 'hello',
    },
  },

二、复杂数据类型

1、数组 Array

错误写法 :

props: {
    demoArr: {
      typeof: Array,
      default: [],
    },
  },

Eslint 语法报错 :

Invalid default value for prop “demo”: Props with type Object/Array must use a factory function to return the default value.

正确的常规写法 :

props: {
    demoArr: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },

或是用 箭头函数 :

props: {
    demoArr: {
      type: Array,
      default: () => [],
    },
  },

2、对象 Object

错误写法 :

props: {
    demoObj: {
      type: Object,
      default: () => {},
    },
  },

正确的常规写法 :

props: {
    demoObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

或是用 箭头函数 :( 注意 : 这里的对象一定要用小括号包裹起来( { } )

props: {
    demoObj: {
      type: Object,
      default: () => ({}),
    },
  },

3、函数 Function

正确写法 :

props: {
    demoFun: {
      type: Function,
      default: () => {},
    },
  },

补充知识 :Vue 传参 props 里面为什么要带 type , 还有 default ?

这个是子组件, 写 type 的 意思 是 swiperDate 传过来的数据类型是 数组 ,

default就是 表示 不传 ,默认返回 的 [ ] , 空数组 .

这种就是 表示 传的数据类型Number, 不传默认是 数字 0 。

到此这篇关于Vue子组件内的props对象参数配置的文章就介绍到这了,更多相关Vue子组件对象参数配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue子组件内的props对象参数配置方法

本文链接: https://www.lsjlt.com/news/166055.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue子组件内的props对象参数配置方法
    目录一、简单数据类型1、布尔类型 Boolean正确写法 :2、数字类型 Number正确写法 :3、字符串类型 String正确写法 :二、复杂数据类型1、数组 Array错误写法...
    99+
    2022-11-13
  • vue如何通过props方式在子组件中获取相应的对象
    目录方法一所以就可以直接拿取方法二有时候会获取不到,可以用一个定时器来获取方法三深拷贝方法四利用watch监听这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就...
    99+
    2022-11-13
  • vue怎么通过props方式在子组件中获取相应的对象
    本文小编为大家详细介绍“vue怎么通过props方式在子组件中获取相应的对象”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么通过props方式在子组件中获取相应的对象”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-30
  • vue3配置全局参数(挂载全局方法)以及组件的使用
    目录vue2的方式1. 全局挂载2. 组件使用vue3的方式1. 全局挂载2. 组件使用vue2的方式 1. 全局挂载 Vue.property.xxx import Vue fro...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作