title: VueJs - reuse component and pass through background-image
body: <p>
  Im trying to reuse a component i VueJs. This is the first time Im using Vue. 
  I have a couple of components in app.vue. And one of them I want to use two times with the only differens between them is the text and the background-image. 
  I can't wrap my head around how Im gonna make that work. Any Ideas??? </p>
  
  <pre><code>App.vue
  &lt;!-- first contact banner --&gt;
  &lt;lrContactBanner bannerText="The text to the first component"&gt;&lt;/lrContactBanner&gt;
  
  &lt;!-- second contact banner --&gt;
  &lt;lrContactBanner bannerText="text text" backgroundImage="contact.jpeg"&gt;&lt;/lrContactBanner&gt;
  
  ContactBanner.vue
  &lt;div class="banner parallax overlay" :style="{ 'background-image': backgroundImage }"&gt;
      &lt;div class="container section"&gt;
          &lt;div class="columns"&gt;
              &lt;div class="column"&gt;
                  &lt;h3&gt; {{ bannerText }} &lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      export default {
        name: 'lrContactBanner',
        props: ['bannerText', 'backgroundImage']
      }
  &lt;/script&gt;
  &lt;style&gt;
      .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;
      }
  &lt;/style&gt;
  </code></pre>