vue_prop注册及验证

1.注册自定义特性

2.prop的大小写

3.传递给一个对象的所有属性

4.prop验证

1.注册自定义特性

当我们在注册组件时，希望其结构、样式和行为是不变的，但是数据应该是可变的，也就是说，所使用的数据应该由外界传递给组件。为了实现数据的接收，组件需要注册props，将数据作为一个自定义特性传递给组件，如下例：

div id="app"><video-item title='羊村摇'poster="https://developer.duyiedu.com/bz/video/955bac93ccb7f240d25a79b2ff6a9fdbda9537bc.jpg@320w_200h.webp"play="24323" rank="3423"></video-item>
</div>

//注册一个组件
Vue.component('video-item', {props: ['title', 'poster', 'play', 'rank'],template: `<div class="video-item"><div class="poster"><img :src="poster" :alt="title"><div class="info"><div class="play">{{ play }}</div><div class="rank">{{ rank }}</div></div></div><div class="title">{{ title }}</div></div>`
})
const vm = new Vue({el: "#app",
})

在上述模板中，我们能够在组件实例中访问这个值，就像访问data中的值一样

2.prop的大小写

HTML中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。因此，当传递的prop为短横线分隔命名时，组件内的props应为驼峰命名，如下例

<video-list :video-list="videoList"></video-list>     //短横线命名

Vue.component('video-list', {props: ['videoList'],   //驼峰命名template: `<div class="video-list"><video-itemv-for="video in videoList"v-bind="video"></video-item></div>`
})

3.传递给一个对象的所有属性

如果要将一个对象的所有属性都作为prop传入，可以使用不带参数的v-bind。

4.prop验证

在注册组件时，可以为组件的prop指定验证要求，即可以设置prop的数据类型，当所传数据不满足指定的数据类型时，Vue就会在浏览器控制台进行警告。

为了指定prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组，如下例：

Vue.component('video-item', {props:{title: String,poster: String,play: Number,rank: String}
})

上述代码中，对prop进行了基础的类型检查，值类型可以为下列原生构造函数中的一种：String/Number/Boolean/Array/Object/Date/Function/Symbol/任何自定义构造函数，或者上述内容组成的数组

【注】null和undefined会通过任何类型验证，

除了基础类型检查外，还可以配置高级选项，对prop进行其他验证，如：类型检测、自定义验证和设置默认值。如下例：

Vue.component('video-item', {props:{title: {type: String,   //检查prop是否为给定的类型default: '羊村摇',  //为改prop指定一个默认值，对象或数组的默认值必须从一个工厂函数返回，如：default () { return {a: 1, b: 10} }required:true,  //定义该prop是否为必填项validator(prop) {   // 自定义验证函数，该prop的值回作为唯一的参数代入，若函数返回一个falsy的值，那么就代表验证失败return prop.length < 4;}}}`
})