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

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

1、父子间传值

• 父传子 - 在子组件使用 props 选项接收父组件的数据。

<!-- 父组件 --><template><div><com-child:value="父组件数据"></com-child></div></template>

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简略写法

一般情况下
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:()=>({})// 对象类型，默认{}}