VueJS:在jquery插件中使用嵌套组件

Question

所以我尝试在vue组件中使用slick.js carousel插件。当没有嵌套的vue组件时，这是有效的。然而，在我尝试使用slick用于滑动轨道的嵌套div包装的那一刻，但在重复之外。基本上，相册只是迭代相册列表，并将所有参数传递给子相册。一切都是启动的，平滑的工作，组件工作，但它们不在滑动轨道内，这意味着它们不会得到旋转木马的待遇。

我研究了指令，插槽等，但没有任何关于这方面的信息。

这是我的HTML：

<div class="albums-component">
    <div class="albums-container" v-slick>
        <album v-for="album in albums.data"
               :album="album"
               file-types="audio,video,image"
               :fixed-size="fixedSize"
               :show-rotator="showRotator"
               :display-limit="3"
               :columns-lg="columnsLg"
               :columns-md="columnsMd"
               :columns-sm="columnsSm"
               :center-images="centerImages"
               :presenter-enabled="true"
               :manage-enabled="manageEnabled">
        </album>
    </div>
    <button class="left add-button" v-on:click="createAlbum"> + </button>
</div>

以下是我的slick指令：

Vue.directive('slick', {
twoWay: true,
priority: 1000,

params: ['options'],

bind: function () {
    var self = this;
    setTimeout(function(){
        $(self.el).slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            elementsExist: true,
            arrows: false,
            fade: true
        });
    }, 1000);

},
update: function (value)
{

},
unbind: function ()
{

}

})；

我不会为了保持这篇文章的简短而张贴专辑组件，因为它很长(在道具，方法等方面)。

任何关于我如何在不用VueJS编写新的旋转木马组件的情况下实现这一点的见解都将不胜感激！

我可以通过添加一个延迟为500ms的setTimeout()来让它工作……虽然这看起来不是很可靠，但是有没有一个钩子来告诉我们什么时候编译immediate组件以及所有子组件？

Answer 1

也许这个例子对你有帮助。

https://jsfiddle.net/ycmnnx9k/2/

HTML

<div id="app">
  <album v-for="(album, index) in albums" :key="index" :album="album"></album>

  <button type="button" @click="addAlbum">
    add album
  </button>
</div>

<script type="text/x-template" id="album">
  <div>
    <div v-for="item in album.items">
        <img v-bind:src="item.url">
    </div>
  </div>
</script>

JS

new Vue({
  el: '#app',
  methods: {
    addAlbum () {
      let newAlbum = Object.assign({}, this.newAlbum)
      this.albums.push(newAlbum)
    }
  },
  data: {
    albums: [],
    newAlbum: {
        items: [
        {name: 1, url: 'https://placeimg.com/200/100/any'},
        {name: 2, url: 'https://placeimg.com/200/100/people'},
        {name: 3, url: 'https://placeimg.com/200/100/tech'},
        {name: 4, url: 'https://placeimg.com/200/100/nature'},
        {name: 5, url: 'https://placeimg.com/200/100/arch'}
      ]
    }
  }
})

Vue.component('album', {
    template: '#album',
    props: ['album'],
    mounted: function () {
      $(this.$el).slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      })
    }
})