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