Vue组件prop属性

1.常用的数据类型

<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
    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 ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    },
    data() {
        return {

        }
    },
    template: `
        <div>
            {{propD}}{{propE}}
        </div>
        `
})

type 可以是下列原生构造函数中的一个：
String
Number
Boolean
Array
Object
Date
Function
Symbol

2.简单使用

如子控件的背景色和是否显示固定样式，可自定义，写法如下

<view :class="{ 'uni-navbar-fixed': fixed }" :style="{ 'background-color': backgroundColor }">
</view>
....

<script>
	export default {
		name: "UniNavBar",
		components: {
			uniStatusBar,
			uniIcons
		},
		props: {
			fixed: {
				type: [Boolean, String],
				default: false
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			...
		}
	}
</script>

参考链接：https://www.jianshu.com/p/ca88cdcea7b4