В прошлом месяце состоялся релиз 2.6.0-beta.3 версии Vue.js. Среди нововведений - фича, которая упрощает слоты с ограниченной областью видимости.
В статье ознакомимся с директивой v-slot и ее сокращением (указанная в RFC-0001 и RFC-0002 ).
Чтобы действительно почувствовать как она упрощает синтаксис, сначала рассмотрим пример из scoped slots. Представьте, что есть компонент List, который определяет отфильтрованный список как scope.
В коде это будет выглядеть примерно так:
<template>
<List :items="items">
<template slot-scope="{ filteredItems }">
<p v-for="item in filteredItems" :key="item">{{ item }}</p>
</template>
</List>
</template>
Такая реализация List не слишком актуальна, но на Codesandbox вы можете осмотреть ее в действии.
С директивой v-slot можно указать scope этого слота прямо в теге компонента, избегая лишнего слоя:
<template>
<List v-slot="{ filteredItems }" :items="items">
<p v-for="item in filteredItems" :key="item">{{ item }}</p>
</List>
</template>
Примечание: v-slot можно использовать только для компонентов и тегов template, но не в чистых HTML-тегах.
Получаем более читабельный код, особенно, если имеем дело с вложенными слотами, когда действительно трудно понять что к чему.
Директива v-slot также вводит способ для объединения директив slot и scoped-slots, разделив их двоеточием.
Посмотрим на пример с vue-promised .
<template>
<Promised :promise="usersPromise">
<p slot="pending">Loading...</p>
<ul slot-scope="users">
<li v-for="user in users">{{ user.name }}</li>
</ul>
<p slot="rejected" slot-scope="error">Error: {{ error.message }}</p>
</Promised>
</template>
С v-slot код можно переписать так:
<template>
<Promised :promise="usersPromise">
<template v-slot:pending>
<p>Loading...</p>
</template>
<template v-slot="users">
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</template>
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
И в завершение, в v-slot является сокращение - символ #, поэтому наш фрагмент кода можно снова модифицировать:
<template>
<Promised :promise="usersPromise">
<template #pending>
<p>Loading...</p>
</template>
<template #default="users">
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</template>
<template #rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
Стоит только помнить, что сокращение для v-slot по умолчанию - #default.
0 комментариев
Добавить комментарий