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

Posted 2023-02-22

【中文标题】VueJS：在 jquery 插件中使用嵌套组件

【英文标题】：VueJS: Using nested components within jquery plugin

【发布时间】：2016-05-06 16:13:12

【问题描述】：

所以我尝试在 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>

这是我的 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 编写新的轮播组件的情况下实现这一点的见解将不胜感激！

我能够通过添加具有 500 毫秒延迟的 setTimeout() 来使其工作...不过，这似乎不太可靠，是否有一个钩子可以说明何时编译直接组件以及所有子组件?

【问题讨论】：

还想指出，我尝试这样做。$nextTick() 用于启动插件，但仍然无法使其正常工作。

您是否尝试在不使用指令的情况下使用 attach() 挂钩？示例：attached () this.els.slickEl.slick(...) ，我只是建议这样做，因为它通常可以正常工作而且我从未使用过指令。

是的，我也试过了

激活阶段有可能是自顶向下的，需要等待子组件被激活/渲染。如果这是问题所在，并且您找到了解决方案，请发布（可能有用），我会尝试先在 activate 中使用 Vue.nextTick()。

我会尝试将v-slick 指令转换为组件，并在初始化后将album 组件$dispatch 设为一个事件。一旦slick 组件接收到所有预期的初始化事件，然后初始化 slick。

【参考方案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
      )
    
)