[JavaScript知识库]Vue: props 合法性验证

props: properties

组件从 parent 接收到的 props 数据的几种写法：

1. 不验证合法性，用数组表示：

 props: ['name', 
 'phoneNumber', 
 'emailAddress', 
 'isFavorite'],

2. 验证数据类型，使用对象：

props: {
        name: String,
        phoneNumber: String,
        emailAddress: String,
        isFavorite: String,
        },

3. 增加更多验证选项：

props: {
        name: {
            type: String,
            required: true,
        },
        phoneNumber: {
            type: String,
            required: true,
        },
        emailAddress: {
            type: String,
            required: true,
        },
        isFavorite: {
            type: String,
            required: false,  // 此 prop 可以不提供
            default: "0", // 此 prop 不提供时使用的默认值
            validator: function(value) {
                // 要求 isFavorite 只能是”1“ 或者”0“
                return value==='1' || value==='0';
            }
        },

当开发大型 app 时，验证 props 合法性十分重要。如果组件接收到的数据不合要求，浏览器 console 将有警告，这样有助于缩短开发调试时间。