注意一：组件传参的时候不能使用驼峰式命名规则
原因：html对大小写不敏感，浏览器会将所有的大写解释为小写
使用：在你使用模板的时候，如果模板中的prop中是以驼峰形式命名的，那么在传参的时候要以短线分隔，eg：
Vue.componet('myInpt',{
porps:['errMess'],
template:`<div>{{errMess}}</div>`
})
// 使用该模板传参的时候
<my-inpt my-input='hello'></my-inpt>
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
注意二：一次传递多个数据
如果一次需要传多个参数过去，可以直接传递一个对象过去
//模板
let imPut = {
template:'<div>{{tit}}-{{name}}-{{words}}</div>',
props:['tit','name','words']
}
// vue实例
<div id='app'>
<im-put :tit='tit' :name='name' :words='words'></im-put> // 这里需要传递的数据过多，可以简写
</div>
new Vue({
data:{
tit:'people',
name:'jack',
words:'hello'
},
components:{
imPut
}
})
可以简写为：
// vue实例
<div id='app'>
<im-put v-bind='mesg'></im-put>
</div>
new Vue({
data:{
mesg:{
tit:'people',
name:'jack',
words:'hello'
}
},
components:{
imPut
}
})
需要注意的是：
<im-put v-bind='mesg'></im-put> // <im-put ：mesg='mesg'></im-put> 两者的区别
前者是第一种方法的简写，等同与第一种，
而后者的意思是在模板中prop传递过来的是这个对象mesg，并且当父级中mesg中某个属性发生改变时，组件中的数据不会发生跟新，prop传递对象都是引用传递，只有当mesg重新被赋值组件中的数据才会发生跟新，同时还可能会引发新的问题，见4
注意三：传参值 不要改变prop的值
组件中的数据传递都是单向流，父组件发生改变子组件数据刷新，但子组件中的数据发生改变的时候，必不会传递给父组件。尽量不要改变父级prop值，浏览器会发出警告。
如果传递的值是原始值，但在组件中又想使用并发现改变
情况一：值作为初始值，这个时候可以在子组件中创建一个新值保存下来
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
情况二： 值可能作为以计算值或者还需要进一步的转换
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意四：传参值是一个对象或者数组
eg: 在组件触发obj.age ++ 时，父组件中的值也发生了改变
<div id="app">
{{ obj.age }}
<my-inp :obj="obj"></my-inp>
</div>
<script>
//组件
let myInp = {
template: `<div>
<p>{{obj.age}}</p>
<button @click='add'>++</button>
</div>`,
props: ['obj'],
methods: {
add() {
this.obj.age++
}
}
}
//vue 实例
new Vue({
el: '#app',
data: {
obj: {
age: 30
}
},
components: { myInp }
})
原因：prop传递的是一个对象或者数组的时候，都是值引用，所以在子组件中发生改变的时候，导致父子组件指向的值都发生了改变
扫描二维码关注公众号，回复：
8667997 查看本文章
注意五：prop验证
Vue.component('my-component', {
props: {
propA: Number, // 基础的类型检查 (`null` 匹配任何类型)
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 // 自定义验证函数 prop值必须匹配下列字符串中的一个
}
}
}
})
但是prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
所以如果你想要是由default 或者 这两个形式的时候注意传值
<my-component propF='sucess'/> // 直接在使用这个组件的时候传值，不要使用父组件中的data或computed的值
