Question

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

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

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

我也想v-for the images

<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']中声明prop。

Answer 2

Vue.component( 'slider', {
	template: '<div class="slider" :style="cBackgroundColor">' +
  	'<span v-for="(image, index) in images" :key="\'image\' + index">' +
    	'<img :src="image.url" :alt="image.alt" :title="image.alt"/>' +
    '</span>' +
  '<div>',
	props: {
  	images: { type: Array },
    backgroundColor: { type: String, default: "#000000" },
    speed: { type: Number },
  },
  computed: {
  	cBackgroundColor: function() {
    	return 'background-color: ' + this.backgroundColor;
    }
  }
});

new Vue({
	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-bind”或快捷方式“：”：

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”，请使用“：key”。见v2.2.0：

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

Vuejs将选项传递给组件

2 个答案: