Question

由于某些原因以及为什么应该使用插槽，我很难理解插槽。我认为这对使用非常有用的唯一原因是，如果我们可以在元素的v-for循环中引用特定的属性，并且可能更快地输出不同的模板...

所以，我在想，也许我可能在想这件事上是错的，但是如果我有一个像这样的变量：

<script>
const items: [
    {
        label: 'My Label',
        url: '#',
        headerTitle: 'My Header Title'
    },
    {
        label: 'My Label 2',
        url: 'https://www.myurl.com',
        headerTitle: 'My Header Title 2'
    },
    {
        label: 'My Label 3',
        url: 'https://www.myurl3.com'
    }
]

export default {
    data () {
        return {
            items: items
        }
    }
}
</script>

并且可能比模板中的要多：

<template>
    <div v-for="(item, index) in items" :key="item.id">
        <template slot-scope="headerTitle">
            <h1>{{ item.headerTitle }}</h1>
        </template>
        <template slot-scope="label">
            <div class="mylabel">
                {{ item.label }}
            </div>
        </template>
        <template slot-scope="url">
            <a :href="item.url">{{ item.label }}</a>
        </template>
    </div>
</template>

我不知道这是否有意义，但基本上是将该属性用作插槽范围，并且每次定义该属性时，它将输出一些内容。但这不能正常工作。这不是组件slot-scopes循环中的v-for的目的吗？这不是如何使用对象数组的这些属性吗？

这对我来说很有意义。无论如何要这样做吗？

在v-for循环中使用插槽或插槽范围来访问属性？

0 个答案: