从槽内获取元素计数

Question

考虑以下 Vue 组件：

<template>

    <!-- Carousel -->
    <div class="carousel-container">

        <div ref="carousel" class="carousel">
            <slot></slot>
        </div>

    </div>

</template>

<script>

    export default {

        data() {
            return {
                items: this.$refs.carousel.querySelector('*')
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        created () {
            console.log(this.count);
        }

    }

</script>

上面的方法不起作用，我认为这是因为我试图refs在数据对象中引用。

我正在尝试获取元素count内的 DOM 元素.carousel。我应该如何实现这一目标？

更新

经过进一步的研究，我发现可以实现如下目标：

<script>

    export default {

        data() {
            return {
                items: []
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        mounted () {
            this.items = this.$refs.carousel.children;
            console.log(this.count);
        }

    }

</script>

但是，我不相信这是实现这一目标的最佳方法。我知道“最好”是主观的，但有人知道有“更好”的方法来实现这一目标吗？

Answer 1

我们可以使用下面的方法获取 .carousel 类中的所有元素

var matched = $(".carousel *");
var total elements = matched.length;

如果您只需要插槽数，您可以使用下面的

var matched = $(".carousel slot");
var total elements = matched.length;