为什么组件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