Вступ до компонентів Vue

Вступ

Розробляючи велику програму, завжди доцільно розбити її на менші компоненти, щоб код було легше читати, структурувати та підтримувати. Більшість початківців Vue розуміють, що таке компоненти, принаймні концептуально, але вони можуть не розуміти, що вони можуть, а що не можуть робити повністю.

У цьому посібнику ми розглянемо, що таке компонент у Vue, як він працює, як передавати через них дані та події та багато іншого.

Що таке компонент Vue?

компоненти це багаторазові екземпляри елементів Vue, які включають шаблони, стилі та елементи JavaScript. Кожен компонент є «власною річчю», подібно до того, як кожен елемент HTML є «власною річчю», і як компоненти Vue, так і елементи HTML дозволяють нам використовувати їх як будівельні блоки для веб-сторінок.

Ви можете розглядати компоненти Vue як HTML-елементи, наповнені JavaScript, які ви можете визначати та керувати ними самостійно.

Типова програма Vue складається з численних компонентів, які можна повторно використовувати скільки завгодно разів.

Наприклад, на звичайному веб-сайті є розділи, які з’являються на всіх сторінках – панель навігації, верхній колонтитул, нижній колонтитул тощо. Тому вважається гарною практикою зробити кожен із них окремим компонентом. Таким чином ми створюємо добре структурований, читабельний, багаторазово використовуваний і легкий в обслуговуванні код:

Як створити компонент Vue

Існує два основних способи створення компонента Vue, залежно від того, як був створений наш проект – з налаштуванням збірки або без нього. У першому випадку кожен компонент зберігається в окремому файлі. У другому випадку в одному файлі може бути кілька компонентів.

Створення компонентів Vue за допомогою налаштування збірки

Більшість проектів створюється за допомогою налаштування збірки, що дозволяє нам створювати однофайлові компоненти (SFC) – виділені компонентні файли з .vue розширення. Це дозволяє нам інкапсулювати шаблон, логіку та стиль компонента Vue в одному файлі:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Створюйте компоненти Vue без налаштування збірки

Якщо ви з будь-якої причини не можете використовувати менеджер пакетів, наприклад npm щоб установити Vue на ваш комп’ютер, ви все ще можете використовувати Vue у своїй програмі. Альтернатива використанню будівлі Vue npm це встановити Vue через a CDN (мережа доставки вмісту) безпосередньо у вашому додатку. Давайте просто швидко розглянемо цей спосіб створення компонента Vue.

Встановлення Vue без збірки дозволить нам використовувати специфічні для Vue функції так само, як і звичайний JavaScript. Синтаксис дещо схожий на той, який ми бачили у звичайних SFC:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

У цьому посібнику ми будемо використовувати Синтаксис SFC, оскільки це найпоширеніший метод створення компонентів.

Як зареєструвати компоненти у Vue

Наразі ми бачили, як створювати компоненти у Vue. Наступним кроком буде використання цих компонентів в іншому компоненті (ієрархія батьків-дітей).

Для цього ми повинні спочатку зареєструвати компоненти, які ми хочемо використовувати. Ця реєстрація передбачає імпорт і подальшу реєстрацію компонентів. Для цього є два варіанти: в цілому та місцева реєстрація.

Компоненти Vue – глобальна реєстрація

Глобально зареєстровані компоненти, як випливає з назви, доступні в усьому світі, що означає, що їх можна використовувати в будь-якому компоненті нашої програми без необхідності їх імпортувати знову. Це досягається шляхом реєстрації компонента за допомогою app.component() метод:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

У ситуації, коли у нас багато компонентів, ми можемо ланцюг їх так:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Після того, як ми зареєстрували наші компоненти, ми можемо використовувати їх у шаблоні будь-якого компонента в цій програмі за допомогою такого синтаксису:

<ChildComponent/>
<ProfileComponent/>

Компоненти Vue – локальна реєстрація

У більшості випадків ми використовуватимемо локальну реєстрацію, оскільки це дозволяє нам контролювати доступність наших зареєстрованих компонентів. Імпортуючи ці компоненти, а потім додаючи їх до components опція досягає цього:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

При назві компонентів використовуйте CamelCase щоб було зрозуміло, що це компонент Vue, а не рідний елемент HTML у шаблонах. Це також полегшує імпорт і реєстрацію компонентів у JavaScript.

Як передати дані через компоненти Vue

Однією з переваг створення компонентів є можливість повторного використання коду, роблячи його модульним.

Припустімо, ми створюємо компонент профілю користувача, який має отримати дані кожного студента зі сторінки профілю; у цьому випадку ми повинні передати ці дані від компонента профілю (батьківського компонента) до компонента профілю користувача (дочірнього компонента), і ми будемо використовувати властивості.

бутафорія

Props — це власні атрибути, які ми можемо зареєструвати в компоненті, щоб ми могли передавати дані від батьківського компонента до дочірнього компонента за допомогою props параметр у тезі сценарію:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

ігрові автомати

Слоти Vue — це зарезервовані місця, які дозволяють нам передавати будь-який тип вмісту від одного компонента до іншого. Це дає більш централізований контроль, ніж props, тому що, на відміну від props, батьківський компонент контролює вміст у дочірньому компоненті. Наприклад, ми могли б зробити таку кнопку:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Тоді ми можемо використовувати цей компонент будь-де, де забажаємо, і надавати йому потрібний вміст. Якщо не надати йому вміст, це означає, що він використовуватиме значення за замовчуванням, яке ми йому надали (Click Me):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Як видавати події з компонентів Vue

Ми дізналися, що властивості використовуються для надсилання даних від батьківського компонента до дочірнього компонента. Але ми можемо задатися питанням, чи є спосіб надіслати щось із дочірнього компонента до батьківського компонента. І відповідь така так, події також можна надсилати від дочірнього компонента до батьківського.

Припустимо, що у нас є батьківський компонент (App.vue), який містить один дочірній компонент (MyBlogPost.vue). Крім того, дочірній компонент містить кнопку, яка має змінити назву.

Припустімо, що ми хочемо змінити заголовок нашої сторінки, коли натискаємо кнопку, щоб запускалася функція:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

А дочірній компонент виглядатиме так:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Висновок

У цьому посібнику ми навчилися працювати з компонентами у Vue, що важливо для всіх, хто використовує Vue. Ми також навчилися надсилати й отримувати дані, а також видавати події.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://stackabuse.com/introduction-to-vue-components/