Vuejs将选项传递给组件

Question

我有一个vue组件，它是一个滑块。

<Slider 
    images= ['img/da-slide1.png', 'img/da-slide1.png'] 
    bg = "#000000" 
    speed = 1 
> 
</Slider> 

我想通过各种选项。我已经试过上面的代码没有任何运气。

我也想为v-对图像进行

<div v-for="item in images"> 
    {{ item }} 
    </div>> 

能不能做到？

Answer 1

您需要将图像阵列财产，注意冒号:images：

<Slider 
    :images="['img/da-slide1.png', 'img/da-slide1.png']" 
    bg="#000000" 
    speed="1" 
></Slider> 

还记得在Slider组件props: ['images']申报道具。

Answer 2

Vue.component('slider', { 
 
\t template: '<div class="slider" :style="cBackgroundColor">' + 
 
    \t '<span v-for="(image, index) in images" :key="\'image\' + index">' + 
 
    \t '<img :src="image.url" :alt="image.alt" :title="image.alt"/>' + 
 
    '</span>' + 
 
    '<div>', 
 
\t props: { 
 
    \t images: { type: Array }, 
 
    backgroundColor: { type: String, default: "#000000" }, 
 
    speed: { type: Number }, 
 
    }, 
 
    computed: { 
 
    \t cBackgroundColor: function() { 
 
    \t return 'background-color: ' + this.backgroundColor; 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
\t el: "#app" 
 
});

.slider { 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://vuejs.org/js/vue.min.js"></script> 
 
<div id="app"> 
 
    <slider 
 
     :images="[{ url:'https://vuejs.org/images/logo.png', alt:'Vue.js' }, { url: 'https://www.codementor.io/assets/page_img/learn-javascript.png', alt:'Javascript' }]" 
 
     background-color="#9b42f4" 
 
     :speed="1"> 
 
    </slider> 
 
</div>

当传递特性的成分，必须使用 “V-绑定” 或快捷键 “：” 的情况下的属性是不是一个字符串：

my-prop="you pass string here" <== when no "v-bind:" or no ":" this is a string 

:my-prop="you write here like in javascript" 
:my-prop="myVariable" <== myVariable is a javascript variable 
:my-prop="2" <== its the number 2 and not the string "2" ! 

:my-prop="'use single quote to use string' + maVariable" 
:my-prop="[ 'array1', 'array2' ]" 
:my-prop="{ 'prop1': 'value1', 'prop2': 'value2' }" 

对于“v-for”使用“：键”。请参见v2.2.0：

对组件使用v-for时，现在需要密钥。升级时，您可能会看到一堆“软警告”，但这不会影响您的应用的当前行为。