vue组件设置child的数据值答案

【问题标题】：Vue component set data value of childvue组件设置child的数据值
【发布时间】：2019-01-11 10:43:19
【问题描述】：

我正在使用 vue 轮播

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

它很好，但我需要重置轮播

我可以看到当前页面有一个值，我认为将其设置为 0 可以作为重置。然而，这些似乎没有暴露的方法让我这样做。我可以从父母那里设置吗？

【问题讨论】：

标签： properties vuejs2 parent-child vue-component

【解决方案1】：

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

在你的情况下，你可以像这样向轮播标签添加一个引用：

<Carousel ref="carousel"/>

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

this.$refs.carousel.currentPage = 0;

【讨论】：

【解决方案2】：

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

将:key绑定到VueCarousel的数据属性
当触发'reset'事件时，只需将数据属性更改为新值，如下例演示（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>

【讨论】：