Использование слотов или областей слотов в циклах v-for для доступа к свойствам? - PullRequest
0 голосов
/ 06 ноября 2018

Мне сложно понять слоты по какой-то причине и почему они должны даже использоваться. Единственная причина, по которой я могу подумать, что это было бы хорошо для использования, - это если мы можем ссылаться на конкретные свойства внутри цикла 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 циклов? Разве это не то, как использовать эти свойства массива объектов?

Этот вид имеет смысл для меня. В любом случае, сделать это, возможно, так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...