Вступ
Розробляючи велику програму, завжди доцільно розбити її на менші компоненти, щоб код було легше читати, структурувати та підтримувати. Більшість початківців Vue розуміють, що таке компоненти, принаймні концептуально, але вони можуть не розуміти, що вони можуть, а що не можуть робити повністю.
У цьому посібнику ми розглянемо, що таке компонент у Vue, як він працює, як передавати через них дані та події та багато іншого.
Що таке компонент Vue?
компоненти це багаторазові екземпляри елементів Vue, які включають шаблони, стилі та елементи JavaScript. Кожен компонент є «власною річчю», подібно до того, як кожен елемент HTML є «власною річчю», і як компоненти Vue, так і елементи HTML дозволяють нам використовувати їх як будівельні блоки для веб-сторінок.
Ви можете розглядати компоненти Vue як HTML-елементи, наповнені JavaScript, які ви можете визначати та керувати ними самостійно.
Типова програма Vue складається з численних компонентів, які можна повторно використовувати скільки завгодно разів.
Наприклад, на звичайному веб-сайті є розділи, які з’являються на всіх сторінках – панель навігації, верхній колонтитул, нижній колонтитул тощо. Тому вважається гарною практикою зробити кожен із них окремим компонентом. Таким чином ми створюємо добре структурований, читабельний, багаторазово використовуваний і легкий в обслуговуванні код:
Як створити компонент Vue
Існує два основних способи створення компонента Vue, залежно від того, як був створений наш проект – з налаштуванням збірки або без нього. У першому випадку кожен компонент зберігається в окремому файлі. У другому випадку в одному файлі може бути кілька компонентів.
Примітка: Пояснюючи, що таке a налаштування збірки і те, як це зробити, виходить далеко за рамки цього посібника. Якщо ви хочете дізнатися більше про основи 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>
Примітка: Щоб уникнути конфліктів із існуючими та майбутніми елементами HTML, завжди краще використовувати багатослівні імена, а не однослівні імена під час іменування наших компонентів. Це не стосується вбудованих компонентів, таких як кореневий компонент (App
, Transition
, і так далі).
Створюйте компоненти 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.
Примітка: Для посилання на наш зареєстрований компонент у шаблоні ми зазвичай використовуємо CamelCase or кебаб-корпус теги – <MyComponent />
or <my-component />
, відповідно.
Як передати дані через компоненти Vue
Однією з переваг створення компонентів є можливість повторного використання коду, роблячи його модульним.
Припустімо, ми створюємо компонент профілю користувача, який має отримати дані кожного студента зі сторінки профілю; у цьому випадку ми повинні передати ці дані від компонента профілю (батьківського компонента) до компонента профілю користувача (дочірнього компонента), і ми будемо використовувати властивості.
бутафорія
Props — це власні атрибути, які ми можемо зареєструвати в компоненті, щоб ми могли передавати дані від батьківського компонента до дочірнього компонента за допомогою props
параметр у тезі сценарію:
<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>
Примітка: Ви можете дізнатися більше про властивості та те, як передавати різні типи даних від батьківського компонента до дочірнього компонента «Посібник з Vue Props».
ігрові автомати
Слоти 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
Ми дізналися, що властивості використовуються для надсилання даних від батьківського компонента до дочірнього компонента. Але ми можемо задатися питанням, чи є спосіб надіслати щось із дочірнього компонента до батьківського компонента. І відповідь така так, події також можна надсилати від дочірнього компонента до батьківського.
Ознайомтеся з нашим практичним практичним посібником із вивчення Git з передовими методами, прийнятими в галузі стандартами та включеною шпаргалкою. Припиніть гуглити команди Git і фактично вчитися це!
Припустимо, що у нас є батьківський компонент (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/
- 1
- 10
- 7
- 9
- a
- здатність
- МЕНЮ
- виконано
- насправді
- Оповіщення
- ВСІ
- дозволяє
- альтернатива
- завжди
- та
- Інший
- відповідь
- будь
- де-небудь
- додаток
- з'являтися
- додаток
- Застосовувати
- стаття
- Атрибути
- наявність
- доступний
- основний
- Основи
- оскільки
- початківці
- Переваги
- КРАЩЕ
- За
- блоки
- border
- Перерва
- будувати
- Створюємо
- вбудований
- button
- не може
- випадок
- випадків
- централізована
- зміна
- дитина
- ясно
- код
- зазвичай
- компонент
- Компоненти
- Концептуально
- висновок
- вважається
- містить
- зміст
- контроль
- управління
- може
- створювати
- створений
- створення
- CSS
- виготовлений на замовлення
- дані
- присвячених
- дефолт
- доставка
- Залежно
- розвивається
- різний
- безпосередньо
- документація
- справи
- вниз
- Dropbox
- кожен
- легше
- легко
- елементи
- включіть
- дозволяє
- істотний
- Події
- Кожен
- приклад
- існуючий
- пояснюючи
- розширення
- Провал
- філе
- Файли
- Перший
- Сфокусувати
- після
- форма
- від
- повністю
- функція
- функціональні можливості
- Крім того
- майбутнє
- Git
- Давати
- дає
- Глобальний
- Глобально
- Go
- добре
- керівництво
- практичний
- має
- ієрархія
- hover
- Як
- How To
- HTML
- HTTPS
- ICON
- ідея
- імпорт
- імпорт
- in
- включати
- включені
- встановлювати
- Вступ
- IT
- JavaScript
- великий
- УЧИТЬСЯ
- вчений
- вивчення
- LG
- місцевий
- подивитися
- виглядає як
- машина
- made
- підтримувати
- Підлягає ремонту
- зробити
- РОБОТИ
- Робить
- менеджер
- багато
- засоби
- метод
- може бути
- модульний
- більше
- найбільш
- множинний
- ім'я
- Імена
- іменування
- рідний
- потреби
- мережу
- Нові
- наступний
- численний
- офіційний
- ONE
- варіант
- Опції
- власний
- пакет
- Виконувати
- місце
- одноколірний
- plato
- Інформація про дані Платона
- PlatoData
- Практичний
- практика
- профіль
- проект
- проектів
- Швидко
- швидко
- Читати
- причина
- отримати
- червоний
- реєструвати
- зареєстрований
- реєструючий
- Реєстрація
- захищені
- багаторазовий
- кільце
- корінь
- сфера
- другий
- розділам
- окремий
- тінь
- аналогічний
- один
- ситуація
- ігрові автомати
- менше
- So
- що в сім'ї щось
- кілька
- пробіли
- стандартів
- старт
- Крок
- Як і раніше
- Стоп
- зберігати
- структура
- студент
- представляти
- такі
- передбачуваний
- SVG
- синтаксис
- TAG
- Приймати
- шаблон
- Шаблони
- Команда
- отже
- річ
- через
- times
- назва
- до
- занадто
- перехід
- спрацьовує
- правда
- Типи
- типовий
- типово
- розуміти
- us
- використання
- користувач
- значення
- Ve
- через
- вид
- способи
- Web
- веб-сайт
- Що
- Що таке
- який
- волі
- в
- без
- Work
- працює
- світ
- XML
- Ти
- вашу
- себе
- зефірнет