Question

我试图重用一个组件我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>

Answer 1

您需要使用v-bind:bannerText或简写:bannerText的绑定道具将值传递给Banner组件。您还需要使用带引号的单引号将字符串传递给组件，因为它默认情况下正在查找对象。这是一个working example。

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

对于背景图像，我实际上会使用像

这样的计算属性

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

VueJs - 重用组件并通过背景图像

1 个答案: