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

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

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