子项的Vue组件设置数据值

Question

我正在使用vue轮播

https://ssense.github.io/vue-carousel/api/

一切正常，但我需要重置轮播

我可以看到当前页面有一个值，我认为将此值设置为0可以作为重置。但是，这些似乎不是允许我执行此操作的公开方法。我可以从父母那里设置吗？

Answer 1

如果要在子组件上设置数据属性，可以在该子组件的标签上设置ref attribute，然后通过this.$refs访问该子实例。

---

在您的情况下，您可以像这样在carousel标签中添加参考：

<Carousel ref="carousel"/>

然后在父组件的脚本中，可以像下面这样设置子组件的currentPage属性：

this.$refs.carousel.currentPage = 0;

Answer 2

出于重置目的，另一个解决方案是：

1. 将:key绑定到VueCarousel的数据属性

2. 在触发“重置”事件时，只需将数据属性更改为新值，如下面的演示（data property=resetIndex）。

因为：key更改为新的时，它将重新安装组件。

const buildSlideMarkup = (count) => {
	let slideMarkup = '';
  for (var i = 1; i <= count; i++) {
  	slideMarkup += '<slide><span class="label">' + i + '</span></slide>'
  }
  return slideMarkup;
};

new Vue({
	el: '#example',
  components: {
  	'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  data() {
  	return {
    	resetIndex: 1
    }
  },
  methods: {
  	reset: function () {
    	this.resetIndex += 1
    }
  },
  template: '<div><button @click="reset()">Reset</button><carousel :key="resetIndex" :scrollPerPage="false">' + buildSlideMarkup(10) + '</carousel></div>'
});

.VueCarousel-slide {
  position: relative;
  background: #42b983;
  color: #fff;
  font-family: Arial;
  font-size: 24px;
  text-align: center;
  min-height: 100px;
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>

<div id="example"></div>