javascript - 如何使用 this.$el 访问不同的元素然后根元素

Question

在我的模板中我得到了这个:

    <div v-show="showContent" class="content-block-body">
        <div class="slider-pro">
            <div class="sp-slides">
                <slide v-for="block in subItems"
                  :uniqueId="block.uniqueId"
                  v-bind="block.settings"
                  :container-preview="containerPreview"
                  :transparent-input-background="transparentInputBackground"
                  v-on:remove="removeBlock(block.uniqueId)"
                  :key="block.uniqueId">
                </slide>
            </div>
        </div>
    </div>

我正在使用需要锁定的jquery插件

<div class="slider-pro">

标签。如果我删除第一个 div，则以下内容有效:

        this.el = jQuery(this.$el)
        this.el.sliderPro()

但是如果我有第一个 div，插件将无法正确初始化。如何使用 this.$el 找到模板内的其他 div，以便我可以将其正确传递给 jQuery，然后使用它来初始化插件。

Answer 1

在该元素上设置ref。

<div class="slider-pro" ref="slider">

然后使用引用。

jQuery(this.$refs.slider)

请记住，只有在渲染组件后(在挂载中或之后)，这才会起作用。