uni-app组件父子页面传递参数Props属性字段类型讲解

pages/index/index.vue父页面代码如下：

<template>
	<view class="wrap">
		<!-- 引用组件 -->
		<navigation :bbb="bbb" :aaa="aaa" :ccc="ccc" :ddd="ddd"></navigation>
	</view>
</template>
<script>
import navigation from '../../components/navigation.vue';
export default {
		data() {
			return {
				// 字符串
				aaa:'classname',
				// 布尔型
				bbb:true,
				// 数值
				ccc:1,
				// 对象类型
				ddd:{abc:666,www:777}
			}
		},
		onLoad(p){},
                components:{
			navigation
		}
}

components/navigation.vue组件示例代码如下：

<template name="navigation">
	<view>
		<view v-if="bbb" :class="aaa">
			{{ccc}}
			{{ddd.abc}}
		</view>
	</view>
</template>
<script>
	export default {
		name:'navigation',
		data() {
			return {}
		},
		created(p){},
		// 父页面传递的属性参数
		props:{
			// 字符串
			aaa:{
				type:String
			},
			// 布尔型
			bbb:{
				type:Boolean
			},
			// 数值
			ccc:{
				type:Number
			},
			// 对象类型
			ddd:{
				type:Object
			},			
		},
		methods:{}
	}
</script>

下面是摘自网络的代码，供参考：

Vue.component('myComponent', {

  props: {

    // 基础类型检测 (`null` 意思是任何类型都可以)

    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 value > 10

      }

    }

  }

});

type 可以是下面原生构造器：

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一个自定义构造器函数，使用 instanceof 检测。

// 自定义Person构造器

function Person(name, age) {

    this.name = name

    this.age = age

}

Vue.component('my-component', {

    template: `<div>名字: {{ person-prop.name }}， 年龄： {{ person-prop.age }} </div>`,

    props: {

      person-prop: {

        type: Person     // 指定类型

      }

    }

});

new Vue({

    el: '#app2',

    data: {

      person: 2        // 传入Number类型会报错

    }

});