Css VueJs-重用组件并传递背景图像

我正在尝试重用VueJs组件。这是我第一次使用Vue。 我在app.vue中有几个组件。其中一个我想用两次，它们之间唯一的区别是文本和背景图像。 我不知道该怎么做。有什么想法吗

App.vue
<!-- first contact banner -->
<lrContactBanner bannerText="The text to the first component"></lrContactBanner>

<!-- second contact banner -->
<lrContactBanner bannerText="text text" backgroundImage="contact.jpeg"></lrContactBanner>

ContactBanner.vue
<div class="banner parallax overlay" :style="{ 'background-image': backgroundImage }">
    <div class="container section">
        <div class="columns">
            <div class="column">
                <h3> {{ bannerText }} </h3>
            </div>
        </div>  
    </div>
</div>

<script>
    export default {
      name: 'lrContactBanner',
      props: ['bannerText', 'backgroundImage']
    }
</script>
<style>
    .parallax { 
        /* background-image: url("../img/lrImage.jpg"); */
        height: 250px; 
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
</style>

App.vue
联系人：www.vue
{{bannerText}
导出默认值{
名称：'lrContactBanner'，
道具：['bannerText'，'backgroundImage']
}
.视差{
/*背景图片：url（“../img/lrImage.jpg”）*/
高度：250px；
/*创建视差滚动效果*/
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
}

您需要使用绑定道具和

v-bind:bannerText

或速记

：bannerText

将值传递给Banner组件。您还需要使用单引号将字符串传递给组件，因为默认情况下组件正在查找对象。这是一个例子

对于背景图像，我实际上会使用一个计算属性，如

<template>
  <div class="banner parallax overlay" :style="style">
       <h3>{{ bannerText }} </h3>
  </div>
</template>

<script>
export default {
   props: ['bannerText', 'backgroundImage', 'color'],
   computed: {
     style() {
       return 'background-image: url(' + this.backgroundImage + ')';
     }
   }
}
</script>

{{bannerText}
导出默认值{
道具：['bannerText'，'backgroundImage'，'color']，
计算：{
样式（）{
返回'backgroundImage:url（'+this.backgroundImage+'）；
}
}
}

您需要使用绑定道具和

v-bind:bannerText

或速记

：bannerText

将值传递给Banner组件。您还需要使用单引号将字符串传递给组件，因为默认情况下组件正在查找对象。这是一个例子

对于背景图像，我实际上会使用一个计算属性，如

<template>
  <div class="banner parallax overlay" :style="style">
       <h3>{{ bannerText }} </h3>
  </div>
</template>

<script>
export default {
   props: ['bannerText', 'backgroundImage', 'color'],
   computed: {
     style() {
       return 'background-image: url(' + this.backgroundImage + ')';
     }
   }
}
</script>

{{bannerText}
导出默认值{
道具：['bannerText'，'backgroundImage'，'color']，
计算：{
样式（）{
返回'backgroundImage:url（'+this.backgroundImage+'）；
}
}
}

谢谢！！！：）我差点就成功了。但是，链接为“”的图片和项目文件夹中的图片有什么区别吗？我想在我的img文件夹中瞄准一张图片，但我似乎无法让它像那样工作。我看到背景图像和url应用于div，但我没有看到任何图片。@Lacon您确定引用的路径正确吗？你还必须确保有背景图像的元素有一个高度和宽度。我已经为我应用背景图像的div添加了样式。但我认为问题在于图像的路径。谢谢！！！：）我差点就成功了。但是，链接为“”的图片和项目文件夹中的图片有什么区别吗？我想在我的img文件夹中瞄准一张图片，但我似乎无法让它像那样工作。我看到背景图像和url应用于div，但我没有看到任何图片。@Lacon您确定引用的路径正确吗？你还必须确保有背景图像的元素有一个高度和宽度。我已经为我应用背景图像的div添加了样式。但我认为问题在于图像的路径。