我有兩個組件：組件 A 和組件 B。在組件 A 中，我有一個hasBorder使用布爾型別呼叫的 props，當我在組件 B 中呼叫組件 A 時，我將值傳遞給組件 A 的 props 組件，出現錯誤.
html組件A：
<div> <img src="path" :style="hasBorder ? 'border:5px;': ''"/></div>
js組件A：
Vue.component('compA', {
props: {
hasBorder:{
type:Boolean,
default:false
}
}
});
html組件B：
<div> My image : <compA has-border="myStyle"></compA></div>
js組件B：
Vue.component('compB', {
data: {
return {
myStyle : { type:Boolean, default :true}
}
}
});
我有這個錯誤“無效的道具：道具的型別檢查失敗hasBorder。預期的布林值，得到值為“myStyle”的字串。
請問我該如何解決這個錯誤
uj5u.com熱心網友回復：
您需要將道具與v-bind:or系結:以傳遞資料。資料屬性需要是一個回傳物件的函式。請看一下片段：
const app = Vue.createApp({
data() {
return {
myStyle: true,
myPath: 'https://picsum.photos/100'
};
},
})
app.component('compA', {
template: `
<div><img :src="path" :style="hasBorder ? 'border: 5px solid turquoise;': ''"/></div>
`,
props: {
hasBorder:{
type:Boolean,
default:false
},
path: {
type: String,
default: ''
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div> My image : <comp-a :has-border="myStyle" :path="myPath"></comp-a></div>
</div>uj5u.com熱心網友回復：
您期望 bool 值，但您正在嘗試發送一個物件。
嘗試這個
Vue.component('compB', {
data: {
return {
myStyle : true
}
}
});并使用 v-bind
<div> My image : <compA v-bind:has-border="myStyle"></compA></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481879.html