vue 中 props 组件传参

注意一:组件传参的时候不能使用驼峰式命名规则

原因:html对大小写不敏感,浏览器会将所有的大写解释为小写
使用:在你使用模板的时候,如果模板中的prop中是以驼峰形式命名的,那么在传参的时候要以短线分隔,eg:

Vue.componet('myInpt',{
    porps:['errMess'],
    template:`
{{errMess}}
` }) // 使用该模板传参的时候

重申一次,如果你使用字符串模板,那么这个限制就不存在了。

注意二:一次传递多个数据
如果一次需要传多个参数过去,可以直接传递一个对象过去

//模板
let imPut = {
    template:'
{{tit}}-{{name}}-{{words}}
', props:['tit','name','words'] }
// vue实例
// 这里需要传递的数据过多,可以简写
new Vue({ data:{ tit:'people', name:'jack', words:'hello' }, components:{ imPut } })

可以简写为:

// vue实例
new Vue({ data:{ mesg:{ tit:'people', name:'jack', words:'hello' } }, components:{ imPut } })

需要注意的是:

    //  两者的区别

前者是第一种方法的简写,等同与第一种,
而后者的意思是在模板中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 ++ 时,父组件中的值也发生了改变

{{ obj.age }}

你可能感兴趣的:(vue)