从插槽中获取元素计数

Posted 2023-02-23

【中文标题】从插槽中获取元素计数

【英文标题】：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

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