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

目录
  • 一、简单数据类型
    • 1、布尔类型 Boolean
      • 正确写法 :
    • 2、数字类型 Number
      • 正确写法 :
    • 3、字符串类型 String
      • 正确写法 :
  • 二、复杂数据类型
    • 1、数组 Array
      • 错误写法 :
      • Eslint 语法报错 :
      • 正确的常规写法 :
      • 或是用 箭头函数 :
    • 2、对象 Object
      • 错误写法 :
      • 正确的常规写法 :
    • 3、函数 Function
      • 正确写法 :

这篇文章主要介绍了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子组件对象参数配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue简明介绍配置对象的配置选项

    目录 一.methods 二.computer计算属性 三.watch 四.filter 一.methods 一般事件调用的函数都会在methods函数里面属性进行定义,在methods属性进行定义的函数,我们也可以称之为方法,一般作为事件的回调函数进行使用.这个被调用几次就能被执行几次. 我们可以通过实例代码来更好的理解我们这个实例: 实例代码: <!DOCTYPE html> <html lang="en"> <head> <title&g

  • vue中的rem如何配置

    目录 vue中rem的配置 1.在js中统一计算进行配置 2.借助px2rem 插件 vue-cil 3.0 px自动转换为rem适配移动端 1.下载postcss-pxtorem.lib-flexible 2.配置main.js 3.根路径配置postcss.config.js vue中rem的配置 开发移动端,我们常常会因为把握不好尺度而觉得十分难受,因此可以用到rem+flex进行,那么vue中我们该如何如何配置呢? 1.在js中统一计算进行配置 新建src/utils/rem.js 代码

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

    目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi

  • Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • VUE子组件向父组件传值详解(含传多值及添加额外参数场景)

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • Vue子组件props从父组件接收数据并存入data

    目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是

  • vue子组件通过.sync修饰符修改props属性方式

    目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed

  • 解决vue 子组件修改父组件传来的props值报错问题

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&

  • Vue 子组件与数据传递问题及注意事项

    在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题. 如何传递 父组件向子组件在进行传递时,使用的是 prop 特性进行传递. 约定 老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件: 子组件的 props 中定义要传递的变量名 变量名同组件的命名规范 父组件传值时,需要使用 短横线分隔命名 使用 v-bind 进行传值 定义 首先在子组件中定义: // Child.vue expo

  • Vue子组件与父组件详细解析

    目录 一.父组件和子组件 二.模板分离写法 1.template标签 2.text/x-template 三.父子组件通信-父传子 1.Prop 类型 四.父子组件通信子传父 1.vm.$emit( eventName, [-args] ) 五.父子组件通信-结合双向绑定案例 1.基本模板代码 2.增加双向绑定 3.反向绑定 六.组件访问父访问子 一.父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该

  • vue子组件封装弹框只能执行一次的mounted问题及解决

    目录 vue子组件封装弹框只能执行一次的mounted vue mounted方法在什么情况下使用和js定时器使用 我们在什么时候使用mounted方法? 总结 vue子组件封装弹框只能执行一次的mounted 封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了. 贴一下简易代码: 父组件: <add-dialog v-if="addVisible" :dialogVisible="addVi

  • vue 子组件watch监听不到prop的解决

    问题描述 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子组件更新. 解决方案 watch: { levelDetail: { immediate: true, // 很重要!!! handler (val) { this.levelPersonal = !val ? {} : val // console.log('ac

随机推荐