prop的2种传值方式

一. 静态传值

1. 当传入的值为字符串时，静态传值

<blog-post title="My journey with Vue"></blog-post>

2. 当传入的值为数字 , 布尔值 , 数组 , 对象时, 即便 传入的值 是静态的，我们仍然需要 v-bind 来告诉 Vue ,

<blog-post v-bind:likes="42"></blog-post>

二. 动态传值

1. 当传入的值为数字 , 布尔值 , 数组 , 对象时

<blog-post v-bind:likes="likes"></blog-post>

2. 当传入一个对象的属于属性时

    post: {  
        id: 1,  
        title: 'My Journey with Vue'  
    }

<blog-post v-bind="post"></blog-post>

等价于

<blog-post  
v-bind:id="post.id"  
v-bind:title="post.title"  
></blog-post>

三. 子组件中对使用prop

1. 这个 prop 用来传递一个初始值

    props: ['initialCounter'],  
    data: function () {  
        return {  
         counter: this.initialCounter  
        }  
    }

2. 这个 prop 以一种原始的值传入且需要进行转换

props: ['size'],  
computed: {  
normalizedSize: function () {  
return this.size.trim().toLowerCase()  
}  
}

四. prop验证

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'].includes(value)  
}  
}  
}