NuxtJS & Bootstrap Vue - 改变卡片组件图片的最佳方法。

Question

想要的结果。 创建一个卡片组件，我可以在几个不同的页面中使用。我想在每个页面上直接定义我想在组件中使用的顶部图片。

卡片组件 :

    <template>
  <div>
    <b-card img-alt="Card image" img-top>
      <b-card-img :src="imageUrl" alt="Image" bottom></b-card-img>
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the
        card's content.
      </b-card-text>
    </b-card>
  </div>
</template>
<script>
export default {
  props: {
    imageUrl: String,
    required: true
  }
};
</script>

索引页 :

<template>
  <div>
    <Card ></Card>
     </div>
      <
</template>

<script>

import Card from "~/components/Card.vue";


export default {
  components: {
    Card

  },
  data: function() {
    return {
      imageUrl: require("../assets/imgs/logo.png")
    };
  },

};
</script>

<style scoped>

}
</style>

你能告诉我是什么问题吗？如果我创建一个重用卡片组件的about-us页面，我想改变imageUrl道具。

Answer 1

你有 imageUrl 在你 Card 组件，但没有在你的 index 页面。你应该可以做到 <Card :image-url="imageUrl"> 在你的索引页上。

然而有一点是错误的，那就是你在组件中如何定义你的道具。

把它改成这样。

props: {
  imageUrl: {
    type: String,
    required: true
  }
}

Vue.component('card', {
  el: '#card-template',
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  }
})


new Vue({
  el: '#app',
  data() {
    return {
      imageUrl: 'https://via.placeholder.com/1920x720'
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <card :image-url="imageUrl"></card>
</div>

<template id="card-template">
  <b-card img-alt="Card image" img-top>
    <b-card-img :src="imageUrl" alt="Image" bottom></b-card-img>
    <b-card-text>
      Some quick example text to build on the card and make up the bulk of the
      card's content.
    </b-card-text>
  </b-card>
</template>