props中属性的命名规则

121 阅读 0 评论 80 点赞

我是靠谱客的博主精明彩虹，最近开发中收集的这篇文章主要介绍props中属性的命名规则，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

props属性的命名规则：

在props中使用驼峰命名，在模板中(建议)使用短横线形式
字符串形式的模板中没有这个限制

通过自定义属性将父组件中的数据传递给子组件：

// 父组件		

// 模板中(建议)用短横线形式：cmt-count
<ArtilceInfo :cmt-count="item.comm_count"></ArtilceInfo>

// 子组件	
<template>
  <div>{{ cmtCount }}</div>
</template>

props: {
        // props中的属性使用驼峰命名：cmtCount
		cmtCount: {
			type: [Number, String],
			default: 0
		}
	}

注意：此处在父组件模板中绑定的属性名(cmt-count)和子组件 props 中的属性名(cmtCount)不相同，但是可以传递数据，可以理解为vue内部会自动转换。但只能有短横线和驼峰两种形式上的差别，不能有其他不一样，比如：绑定的是 cmt-number，props 中的是 cmtCount就不行，就无法传递数据。