Що робить аргумент у директиві?
Аргумент директиви - це частина після двокрапки (:), яка вказує конкретний аспект елемента, до якого застосовується директива.
Тобто аргумент уточнює, з чим саме працює директива.
Приклад синтаксису
javascript
v-directiveName:argument="value"Наприклад:
javascript
v-bind:href="link"
v-on:click="handler"Аргумент у стандартних директивах
1. v-bind - до якого атрибута прив'язувати
javascript
<a v-bind:href="url">Посилання</a>href - це аргумент.
Він каже Vue: "прив'яжи значення до атрибута href".
Можна скорочувати:
javascript
<a :href="url">2. v-on - яку подію слухати
javascript
<button v-on:click="submit">Відправити</button>click - аргумент.
Він визначає тип події.
Скорочення:
javascript
<button @click="submit">3. v-slot - ім'я слота
javascript
<template v-slot:header>
Заголовок
</template>header - ім'я слота.
4. v-model (Vue 3) - до якого пропа і події прив'язуватися
У кастомних компонентах:
javascript
<MyInput v-model:title="pageTitle" />Тут аргумент title каже, що зв'язок іде з пропом title і подією update:title.
Аргумент у користувацькій директиві
Аргумент доступний в об'єкті binding:
javascript
<div v-color:background="'red'"></div>javascript
app.directive('color', {
mounted(el, binding) {
if (binding.arg === 'background') {
el.style.backgroundColor = binding.value;
} else {
el.style.color = binding.value;
}
}
});binding.arg → "background"
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.