Пользовательские директивы Vue.js с компонентами

Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это эффективная, доступная и универсальная структура. Мы можем создавать одностраничные приложения, а также приложения полного стека. Он построен на основе HTML, CSS и Javascript, что упрощает разработчикам интеграцию Vue.js в любое приложение на любом этапе.

Пользовательские директивы позволяют разработчикам легко создавать и использовать некоторые пользовательские функции для элементов. Как и встроенные директивы, такие как v-model, v-for, v-if и т. д., мы можем создавать собственные директивы, которые будут соответствовать тому, что мы установили. Это позволяет повторно использовать некоторую логику, имея доступ к нижнему уровню DOM. Мы также можем передавать данные в пользовательские директивы.

Пользовательские директивы с компонентами: Пользовательские директивы можно использовать с компонентами путем изменения, удаления или добавления любого содержимого к элементу. Пользовательские директивы всегда будут применяться к корневому узлу компонента. У нас может быть элемент ввода, который должен иметь какой-то текст-заполнитель по умолчанию или какое-то значение по умолчанию.

Синтаксис: В компоненте перед названием директивы добавьте «v-» следующим образом:

<script>
const customDirective = {
  ...
};
export default {
  directives: {
    customDirective,
  },
};
</script>
<template>
  ...
  <MyElement v-customDirective />
</template>

Пример. В следующем примере у нас есть пользовательская директива input для элементов ввода, позволяющая легко размещать цвет и текст-заполнитель в элементах ввода.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js, используя следующую команду.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта: После успешной установки будет сформирована следующая структура проекта.

Структура проекта

Шаг 2. В разделе сценария файла App.vue создайте пользовательскую директиву и назовите ее как входные данные. В разделе mount добавляем элемент и привязку, через которую будем получать значение от элементов. Затем измените значение элемента соответствующим образом.

<script>

const input = {

  mounted: (el, binding) => {

    console.log(binding.value);

    el.placeholder = binding.value.placeholder;

    el.style.color = binding.value.color;

  },

};

export default {

  directives: {

    input,

  },

};

</script>

Шаг 3: В разделе шаблона файла App.vue добавьте два элемента ввода и добавьте значения для заполнителя и цвета.

<template>

  <center>

    <h1 style="text-align: center;

        color: green">GeeksforGeeks</h1>

    <strong>

        Vue.js Custom Directives with Components

       </strong>

    <br />

  </center>

  <center>

    <input type="text"

             v-input="{ placeholder: 'Green Color Input',

                         color: 'green' }" />

    <input type="text"

             v-input="{ placeholder: 'Red Color Input',

                         color: 'red' }"/>

  </center>

</template>