我想將 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 style="margin-bottom: 2rem; margin-top: 2rem;">
<img 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>
使用的版本：Vue 3
uj5u.com熱心網友回復：
使用 DOM 模板（模板作為 HTML 的一部分）時，需要將 pascal 大小寫的屬性/道具名稱（例如“posterUrl”）轉換為 kebab-case -“poster-url”
檔案
HTML 屬性名稱不區分大小寫，因此瀏覽器會將任何大寫字符解釋為小寫。這意味著當您使用 DOM 模板時，camelCased 道具名稱需要使用它們的 kebab-cased（連字符分隔）等價物
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377653.html