注意一:组件传参的时候不能使用驼峰式命名规则
原因: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传递的是一个对象或者数组的时候,都是值引用,所以在子组件中发生改变的时候,导致父子组件指向的值都发生了改变
注意五: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的值