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