2017-12-05 14 views
0

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

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> 

答えて

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

おかげのように計算されたプロパティを使用する背景画像については

<lrContactBanner :bannerText="'text text'" :backgroundImage="'contact.jpeg'"></lrContactBanner> 

! :)私はほとんどそれを働かせました。しかし、それは "http://via.placeholder.com/350x150"というリンクからの写真と私のプロジェクトにフォルダ内にある写真との間に違いはありますか? 私のimgフォルダ内の画像をターゲットにしたいのですが、そのように動作するように思えます。私は、背景画像とURLがdivに適用されているが、私はどんな画像も見ません。 – Lacon

+0

@Lacon正しいパスを参照していますか?また、背景イメージを持つ要素の高さと幅を確認する必要があります。 –

+0

divのスタイリングを追加して、背景イメージを貼り付けました。しかし、私はそれが問題になっている画像への道があると思う。 – Lacon