无法在 Vue3 中传递多个道具

Posted 2023-02-23

【中文标题】无法在 Vue3 中传递多个道具

【英文标题】：Unable to pass more than one props in Vue3

【发布时间】：2022-01-14 04:19:07

【问题描述】：

我想将 2 个道具传递给我的组件。两者都是字符串，但只能传入标题道具。我通过将 url 传递给标题道具检查了 posterUrl，它可以工作。但是当我将其作为海报发送时，无法收到标题。所以我确定不是数据有问题。

然后我尝试使用默认值，图像显示但它们都使用默认值。我尝试过使用速记、v-bind 和标准用法，但没有任何效果。

组件看起来像这样

    app.component('item-movie', 
        props: 
            title: String,
            posterUrl: 
                type: String,
                default: "https://image.tmdb.org/t/p/original/5NYdSAnDVIXePrSG2dznHdiibMk.jpg",
            ,
        ,
        template:
            /*html*/
            `
        <div class="col-md" style="margin-bottom: 2rem; margin-top: 2rem;">
            <img class="img-fluid" style="min-width: 300px;" v-bind:src="posterUrl">
            <p style="margin-top: 1rem; margin-bottom: -0.3rem; color: white;"> title </p>
        </div>
        `,
    )

我是这样用的

        <item-movie v-for="movie in movies" :key="movie.id"
          :title="movie.title" :posterUrl="imageUrl+movie.poster_path">
        </item-movie>

【问题讨论】：

尝试使用:poster-url= ....docs

@MichalLevý 谢谢你的作品。你想回答（不评论），所以我可以选择你的答案吗？顺便说一句，我不了解文档链接。

【参考方案1】：

当使用 in-DOM 模板（模板作为 HTML 的一部分）时，pascal 大小写的属性/prop 名称（例如“posterUrl”）需要转换为 kebab-case -“poster-url”

Docs

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当您使用 in-DOM 模板时，camelCased 道具名称需要使用其 kebab 大小写（连字符分隔）等价物