Как передать несколько значений директиве?vue-64

В Vue.js существует несколько способов передать несколько значений в пользовательскую директиву. Рассмотрим основные подходы.

1. Передача объекта

Самый распространенный способ - передача объекта:

<div v-my-directive="{ color: 'red', text: 'Hello', size: 14 }"></div>

В директиве:

Vue.directive('my-directive', {
  bind(el, binding) {
    console.log(binding.value.color) // 'red'
    console.log(binding.value.text) // 'Hello'
    console.log(binding.value.size)  // 14
  }
})

2. Использование аргументов и модификаторов

Можно комбинировать аргументы и модификаторы:

<div v-my-directive:primary.large.dark></div>

В директиве:

Vue.directive('my-directive', {
  bind(el, binding) {
    const type = binding.arg // 'primary'
    const isLarge = binding.modifiers.large // true
    const isDark = binding.modifiers.dark // true
  }
})

3. Комбинированный подход

Объединяем оба метода:

<div v-my-directive:primary="{ size: 'large', theme: 'dark' }"></div>

4. Передача массива

Можно передать массив значений:

<div v-my-directive="['red', 14, 'bold']"></div>

5. Динамическая передача значений

Значения могут быть динамическими через data или computed:

<div v-my-directive="directiveParams"></div>

export default {
  data() {
    return {
      directiveParams: {
        color: 'blue',
        size: 16
      }
    }
  }
}

Пример комплексной директивы

Vue.directive('style-manager', {
  bind(el, binding) {
    const { color, size, disabled } = binding.value

    el.style.color = color || 'black'
    el.style.fontSize = `${size}px` || '16px'

    if (disabled) {
      el.style.opacity = '0.5'
      el.style.pointerEvents = 'none'
    }
  },
  update(el, binding) {
    // Реактивное обновление при изменении значений
    if (binding.value.color !== binding.oldValue.color) {
      el.style.color = binding.value.color
    }
  }
})

Использование:

<div v-style-manager="{ color: activeColor, size: fontSize, disabled: isDisabled }"></div>

Особенности Vue 3

В Vue 3 подходы аналогичны, но можно использовать Composition API для более сложной логики:

app.directive('style-manager', {
  mounted(el, binding) {
    setupDirective(el, binding)
  },
  updated(el, binding) {
    setupDirective(el, binding)
  }
})

function setupDirective(el, binding) {
  // Логика обработки значений
}

Лучшие практики

  1. Используйте объекты для сложных конфигураций
  2. Для простых случаев достаточно модификаторов
  3. Документируйте ожидаемую структуру значений
  4. Проверяйте входные значения

Резюмируем:

в Vue можно передавать несколько значений директиве через объекты, массивы, аргументы и модификаторы. Выбор способа зависит от сложности задачи - для простых случаев подойдут модификаторы, для сложных конфигураций лучше использовать объекты.

Вопросы

Собеседования