从插槽中获取元素计数答案

【问题标题】：Get Element Count from within a Slot从插槽中获取元素计数
【发布时间】：2019-10-22 22:24:28
【问题描述】：

考虑以下 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。

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

更新

经过进一步的研究，我发现可以这样实现：

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

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

【问题讨论】：

如果你在插槽中使用组件而不是普通的 HTML 元素，你也可以使用this.$children

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我认为计算标签中元素的更简单、更直接的方法应该是这样的：

<script>

    export default {

        data() {
            return {
                count: 0
            }
        },

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

    }

</script>

【讨论】：

【解决方案2】：

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

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

如果你只需要槽数，你可以在下面使用

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

【讨论】：