如何将布尔道具传递给 vuejs 中的另一个组件
How to pass Boolean props to another component in vuejs
我有两个组件:组件 A 和组件 B。在组件 A 中,我有一个名为 hasBorder
的布尔类型的道具,当我在组件 B 中调用组件 A 时,我将值传递给 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}
}
}
});
我有这个错误 “无效的 prop:type 检查失败道具 hasBorder
。预期的布尔值,得到值为“myStyle”的字符串。
请问我该如何解决这个错误
您需要布尔值,但您正在尝试发送一个对象。
试试这个
Vue.component('compB', {
data: {
return {
myStyle : true
}
}
});
并使用v-bind
<div> My image : <compA v-bind:has-border="myStyle"></compA></div>
您需要使用 v-bind:
或 :
绑定 props 才能传递数据。数据 属性 需要是 returns 对象的函数。请看一下片段:
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>
我有两个组件:组件 A 和组件 B。在组件 A 中,我有一个名为 hasBorder
的布尔类型的道具,当我在组件 B 中调用组件 A 时,我将值传递给 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}
}
}
});
我有这个错误 “无效的 prop:type 检查失败道具 hasBorder
。预期的布尔值,得到值为“myStyle”的字符串。
请问我该如何解决这个错误
您需要布尔值,但您正在尝试发送一个对象。
试试这个
Vue.component('compB', {
data: {
return {
myStyle : true
}
}
});
并使用v-bind
<div> My image : <compA v-bind:has-border="myStyle"></compA></div>
您需要使用 v-bind:
或 :
绑定 props 才能传递数据。数据 属性 需要是 returns 对象的函数。请看一下片段:
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>