javascript - VueJS : Using nested components within jquery plugin

Question

所以我试图在 vue 组件中使用 slick.js 轮播插件。这在没有嵌套的 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>

这是我巧妙的指令:

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 ()
{

}

});

我不会发布专辑组件以保持这篇文章简短，因为它很长(在 Prop 、方法等方面)

任何关于我如何在不使用 VueJS 编写新的轮播组件的情况下实现这一目标的见解将不胜感激!

我能够通过添加一个延迟 500 毫秒的 setTimeout() 来让它工作……不过这看起来不是很可靠，是否有一个钩子(Hook)说明直接组件以及所有子组件何时被编译？

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
      })
    }
})