如何在vuejs中将布尔道具传递给另一个组件
如何在vuejs中将布尔道具传递给另一个组件
提问于 2022-05-26 14:16:49
我有两个组件:组件A和组件B。在组件A中，我有一个名为hasBorder的道具，具有布尔类型，当我在组件B中调用组件A时，我将值传递给组件A的道具组件，我有一个错误。
html组件A：
<div> <img src="path" :style="hasBorder ? 'border:5px;': ''"/></div>联合材料构成部分A：
Vue.component('compA', {
props: {
hasBorder:{
type:Boolean,
default:false
}
}
});html组件B：
<div> My image : <compA has-border="myStyle"></compA></div>联合材料B部分：
Vue.component('compB', {
data: {
return {
myStyle : { type:Boolean, default :true}
}
}
});我有一个错误“无效的：类型检查失败的支柱预期布尔，得到字符串值"myStyle".。
请问如何纠正这个错误？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-26 15:01:43
为了传递数据，您需要将您的道具绑定到v-bind:或:。数据属性需要是返回对象的函数。请看一看片段：
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>
Stack Overflow用户
发布于 2022-05-26 14:21:38
您期望bool值，但您正在尝试发送一个对象。
尝尝这个
Vue.component('compB', {
data: {
return {
myStyle : true
}
}
});
并使用v-绑定。
<div> My image : <compA v-bind:has-border="myStyle"></compA></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72393282
复制相关文章
相似问题
腾讯云开发者
