如何将布尔道具传递给 vuejs 中的另一个组件

Question

我有两个组件：组件 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”的字符串。

请问我该如何解决这个错误

Answer 1

您需要布尔值，但您正在尝试发送一个对象。

试试这个

Vue.component('compB', {
    data: {
       return {
           myStyle : true
        } 
    }
});

并使用v-bind

<div> My image : <compA v-bind:has-border="myStyle"></compA></div>

Answer 2

您需要使用 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>

如何将布尔道具传递给 vuejs 中的另一个组件

How to pass Boolean props to another component in vuejs

javascript

vue.js

vuejs2

vue-component