Bootstrap-Vue 组件自定义卡片

Question

我开始学习 VueJS 2 编程。 我需要在我的网站中添加卡片。我创建了自己的组件“Cards.vue”， 我已经包含了Bootstrap-Vue 提供的卡片组件 Cards.vue 应该在 Home.vue 中使用。我要修改 Home.vue 中的几个“img-src”。

卡片代码.vue：

    <template>
    <div>
      <b-card
        title="Card Title"
        img-src="../../assets/images/fondLBM.png"
        img-alt="One's image alt"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>
          <slot name="text"> 
"Some quick example text to build on the card title and make up the bulk of the card's content."</slot>
        </b-card-text>

        <b-button href="#" variant="primary">
            <slot name="button-txt"> Go somewhere </slot>
        </b-button>
      </b-card>
    </div>
    </template>

    <script>
    export default{
        name : 'CardS'
    }
    </script>

我在 Home.vue 中的代码：

    <section class="bg-light py-5">
      <h2>Section</h2>
      <b-container>
        <b-row>
          <b-col>
            <bscard>
              
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard imgsrc="imgsrc[1]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
          <b-col>
            <bscard v-bind:imgsrc="imgsrc[2]">
              <template v-slot:text>
                <p>One's product</p>
              </template>
              <template v-slot:button-txt>
                <span>Got it !</span>
              </template>
            </bscard>
          </b-col>
        </b-row>
      </b-container>
    </section>
<script>
// @ is an alias to /src
import CardS from "@/components/Contents/Cards.vue";

export default {
  name: "Home",
  components: {
    bscard: CardS
  },
  data(){
    return {
      imgsrc : [
      'https://picsum.photos/600/300/?image=25', 
      'https://picsum.photos/600/300/?image=25', 
      'https://picsum.photos/600/300/?image=25']
    }
  }
}
</script>

Answer 1

如果你想在你的卡片中添加一张图片，你应该给你的组件添加一个道具。

https://vuejs.org/v2/guide/components-props.html

<script>
export default{
    name : 'CardS',
    props:["imagePath"]

}
</script>

在你的模板中

<template>
...
<img
:scr:"imagePath"
</template>

在你的主页上

<bscard :src="imgsrc[1]">