vue.js --prop、prop的验证和prop的注意事项

╰+哭是因爲堅強的太久メ 2023-02-18 14:07 15阅读 0赞

## 1、prop的验证（我就直接从官网复制了） ##

> 所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定** 对HTML 中的 attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。  
> 这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

1、以数组的形式

prop:['name','age'];

2、以对象的形式

prop:{ 
    	name:{ 
    		type:String,
    		default:''
    	},
    	age:{ 
    		type:Number,
    		default:18,
    	}
    }

> JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用**折行转义字符**取而代之

## 折行转义字符？ ##

![折行转义字符][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

Vue.component('my-component', { 
      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
          }
        }
      }
    })

注意以下：

> 1、prop验证失败的时候，（开发版本的vue）构建的项目会发出警告；  
> 2、prop的验证会在**vue实例创建之前**就开始了，所以，在prop中不能书写以下属性：data、computed、methods在default 或 validator 函数中是不可用的

## 2、类型检查 ##

那么type有哪些？8种

> String  
> Object  
> Array  
> Number  
> Symbol  
> Boolean  
> Date  
> Function  
> type 还可以是一个自定义的构造函数，并且通过 **instanceof** 来进行检查确认

function Person (firstName, lastName) { 
      this.firstName = firstName
      this.lastName = lastName
    }

验证 author prop 的值是否是通过 new Person 创建的。

Vue.component('blog-post', { 
      props: { 
        author: Person
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200618094550646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE=,size_16,color_FFFFFF,t_70#pic_center