引导-Vue组件自定义卡

Question

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

Cards.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://v2.vuejs.org/v2/guide/components-props.html

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

}
</script>

在你的模板里

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

在你的主页上

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