为什么组件my-item的props是listCount，但传入时候用:list-count传入，而 listCount与list-count不一致
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
<my-list :count="5"></my-list>
</div>
<script>
var app = Vue.createApp({});
const listCom = {
props: {
count: Number,
},
template: `
<div style="border: red solid 10px;">
<my-item v-for="i in count" :list-count="count" :index="i"></my-item>
</div>
`
};
const itemCom = {
props: {
listCount: Number,
index: Number,
},
template: `
<div style="border: blue solid 10px;">
<my-label :list-count="listCount" :index="index"></my-label>
</div>
`
};
const labelCom = {
props: {
listCount: Number,
index: Number,
},
template: `
<div>{{ index }}/{{ listCount }}</div>
`
};
app.component("my-list", listCom);
app.component("my-item", itemCom);
app.component("my-label", labelCom);
app.mount("#Application");
</script>
</body>
</html>
在Vue中，组件的props属性名称是大小写不敏感的。这意味着您在定义props时可以使用camelCase（驼峰式命名）或kebab-case（短横线分隔式命名）两种命名方式。
在您的示例中，my-item组件的props定义了listCount和index两个属性：
props: {
listCount: Number,
index: Number,
},
然后，在父组件中，您使用了list-count这样的kebab-case命名方式来传递属性值：
<my-item v-for="i in count" :list-count="count" :index="i"></my-item>
Vue会自动将kebab-case的属性名转换为camelCase的属性名，以与组件中定义的props匹配。因此，list-count在传递给my-item组件时会被转换为listCount，并将其值传递给组件内部。
这种转换是Vue中的一项约定，并且是为了提高开发人员的灵活性和代码的可读性。您可以根据自己的喜好选择使用camelCase或kebab-case来定义props属性，并在传递属性时使用任何一种方式。Vue会根据约定进行自动转换。
标签：Vue,知识,Number,listCount,props,组件,沉淀,my From： https://www.cnblogs.com/johnyang/p/17467830.html