VueJs - コンポーネントを再利用して背景画像を渡す

Question

コンポーネントを再利用しようとしています。 Vueを使っているのはIm初めてのことです。 私はapp.vueにいくつかのコンポーネントを持っています。そして、私が2回使いたいのは、テキストと背景画像だけです。 私はその仕事をどうやって作っていくのか、私の頭を包み込むことはできません。何か案は？？？

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> 

Answer 1

あなたはバナーコンポーネントに値を渡すためにv-bind:bannerTextまたは短期手:bannerTextにバインドされた小道具を使用する必要があります。デフォルトでオブジェクトを探しているので、コンポーネントに文字列を渡すには、引用符付きのシングルクォートも使用する必要があります。ここにはworking exampleがあります。私は実際に

<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>