JZTXT

Vue知识沉淀

发布时间 2023-06-08 22:12:19作者: JohnYang819

为什么组件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会根据约定进行自动转换。