父子组件通讯属性名应该遵循怎样的规则?

        在vue中,父组件传递给子组件的props属性名称可以与子组件中生命的属性名称不完全相同,但是两者之间需要遵循一定的转换规则。

        当父组件中使用冒号来帮顶props属性时,冒号后面的名称即为父组件中的属性名称。而在子组件中声明props时的属性名称可以根据需要自定义。

下面是一些常见的转换规则:

  1. CamelCase vs. kebab-case: 在HTML中,属性名是不区分大小写的,因此在传递props时,可以使用驼峰命名法或短横线命名法。例如,在父组件中使用<child-component :myProp="value"></child-component>,然后在子组件的props中声明为props: ['myProp']

  2. 驼峰命名转换成短横线命名: 如果父组件的props属性是驼峰命名法,而子组件中的props属性使用短横线命名法,则Vue会自动进行转换。例如,在父组件中使用<child-component :myPropName="value"></child-component>,然后在子组件的props中声明为props: ['my-prop-name']

  3. 类型转换: 如果父组件传递给子组件的props属性需要进行类型转换,可以通过使用props对象来实现。例如,在父组件中使用<child-component :myProp="value"></child-component>,然后在子组件中的props中声明为props: { myProp: String },这样Vue会将传递的值自动转换为字符串类型。

        总而言之,父组件中的属性名和子组件中声明的props属性名不一定需要完全相同,但需要遵循一定的转换规则,以确保正确地传递和接收props属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值