无法在 Vue3 中传递多个道具

Unable to pass more than one props in Vue3

我想将 2 个道具传递给我的组件。两者都是字符串,但只能传入 title 道具。我通过将 url 传递给 title 道具来检查 posterUrl 并且它有效。但是当我把它作为海报发送时,收不到标题。所以我确定不是数据有问题。

然后我尝试使用默认值,图像出现了,但他们都使用默认值。我试过使用 shorthand、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>

当使用 in-DOM 模板(模板作为 HTML 的一部分)时,pascal 大小写的 attribute/prop 名称(例如“posterUrl”)需要转换为 kebab-案例-“海报-url”

Docs

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents