Vue3中无法传递多个props

Question

我想将 2 个 props 传递给我的组件。两者都是 String，但只能传入 title props。我通过将 url 传递给 title props 来检查 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>

Answer 1

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

文档

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写字符。这意味着当您使用 DOM 内模板时，驼峰命名的 prop 名称需要使用其短横线命名（连字符分隔）的等效项