一、深入剖析组件_Prop
1.注册自定义特性
组件默认只是写好结构、样式和行为,使用的数据应由外界传递给组件。
如何传递?注册需要接收的prop,将数据作为一个自定义特性传递给组件。
如:
<div id="app">
<video-item poster='https://developer.duyiedu.com/bz/video/1a13598398d0736446236c7108567cabe2392039.jpg@320w_200h.webp'
title='jimo'
play='185.6万'
rank='1207'
></video-item>
</div>
<script>
Vue.component('video-item',{
props: ['poster','title','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'
})
</script>
在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样:
2.Prop的大小写
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。故:当 传递的prop为 短横线分隔命名时,组件内 的props 应为 驼峰命名 。
如:
<div id="app">
<video-item sub-title='hellow'></video-item>
</div>
<script>
Vue.component('video-item',{
props: ['subTitle'],
template:`
<h3>{
{ subTitle }}</h3>
`
});
const vm = new Vue({
el: '#app'
});
</script>
要注意的是:如果使用的是字符串模板,那么这个限制就不存在了。
3.传递静态或动态 Prop
像这样,我们已经知道了可以给 prop 传入一个静态的值:
若想要传递一个动态的值,可以配合v-bind指令进行传递,如:
<div id="app">
<video-item :sub-title='title'></video-item>
</div>
<script>
Vue.component('video-item',{
props: ['subTitle'],
template:`
<h3>{
{ subTitle }}</h3>
`
});
const vm = new Vue({
el: '#app',
data: {
title: 'hellow'
}
});
</script>
1.传递一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind 。例如,对于一个给定的对象 person:
person: {
name: 'shanshan',
age: 18
}
传递全部属性:
<my-component v-bind="person"></my-component>
上述代码等价于:
<my-component
:name="person.name"
:age="person.age"
></my-component>
例:
<div id="app">
<video-list :video-list="videoList"></video-list>
</div>
<script>
Vue.component('video-list', {
props: ['videoList'],
template: `
<div class="video-list">
<video-item
v-for="video in videoList"
v-bind="video"
></video-item>
</div>
`
});
Vue.component('video-item', {
props: ['poster', 'play', 'rank', 'title'],
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: {
videoList: [],
},
created () {
axios.get('https://developer.duyiedu.com/vue/bz/video', {
params: {
start: 0,
offset: 12
}
}).then(res => {
this.videoList = res.data.data
})
},
})
</script>
4.组件_Prop验证
<div id="app">
<my-cmp :list='list'></my-cmp>
</div>
<script>
Vue.component("my-cmp",{
props: ['list'],
template: `
<ul>
<li v-for='person in list' :key='person.name'>
{
{ person.name }}
</li>
</ul>
`
});
const vm = new Vue({
el: '#app',
data: {
list: [
{
name: 'jimo'},
{
name: 'huahua'}
]
}
});
</script>
一旦出现一些细微错误:
const vm = new Vue({
el: '#app',
data: {
// list: [
// {name: 'jimo'},
// {name: 'huahua'}
// ]
list: 2
}
});
</script>
那么将不显示结果也不会提示错误,如果在一个大项目中去看代码那真是令人头大。
1.Prop验证
我们可以为组件的 prop 指定验证要求,例如你可以要求一个 prop 的类型为什么。如果说需求没有被满足的话,那么Vue会在浏览器控制台中进行警告,这在开发一个会被别人用到的组件时非常的有帮助。
为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
Vue.component('my-component', {
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}
});
例:
Vue.component("my-cmp",{
props: {
list: Array, //期待list是一个数组
//list: [Array,String] 期待数组或字符串
},
template: `
<ul>
<li v-for='person in list' :key='person.name'>
{
{ person.name }}
</li>
</ul>
`
});
上述代码中,对prop进行了基础的类型检查,类型值可以为下列原生构造函数中的一种:String
、Number
、Boolean
、Array
、Object
、Date
、Function
、Symbol
、任何自定义构造函数、或上述内容组成的数组。
需要注意的是null
和 undefined
会通过任何类型验证。
<my-cmp :list='null'></my-cmp>
<my-cmp :list='undefined'></my-cmp>
除基础类型检查外,我们还可以配置高级选项,对prop进行其他验证,如:类型检测、自定义验证和设置默认值。
如:
Vue.component('my-component', {
props: {
title: {
type: String, // 检查 prop 是否为给定的类型
default: '杉杉最美', // 为该 prop 指定一个默认值,对象或数组的默认值必须从一个工厂函数返回,如:default () { return {a: 1, b: 10} },
required: true, // 定义该 prop 是否是必填项
validator (prop) {
// 自定义验证函数,该prop的值回作为唯一的参数代入,若函数返回一个falsy的值,那么就代表验证失败
return prop.length < 140;
}
}
}
})
<div id="app">
<!-- <my-cmp :list='list'></my-cmp> -->
<my-cmp></my-cmp>
</div>
<script>
Vue.component("my-cmp",{
props: {
list: {
type: Array,//检测类型
default(){
//默认值
return [
{
name: '真的'},
{
name: '假的'}
]
}
}
},
template: `
<ul>
<li v-for='person in list' :key='person.name'>
{
{ person.name }}
</li>
</ul>
`
});
const vm = new Vue({
el: '#app',
data: {
list: 2
}
});
</script>
为了更好的团队合作,在提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。