VueJS - Компоненты: Основные блоки современных веб-приложений

Здравствуйте, будущие маги Vue.js! Я рад быть вашим проводником в этом захватывающем путешествии в мир компонентов Vue.js. Как кто-то, кто уже давно teaches программирование, я могу сказать, что понимание компонентов похоже на обучение использованию кубиков LEGO - как только вы научитесь им пользоваться, вы сможете создавать потрясающие вещи! Так что давайте окунемся и повеселимся!

Что такое компоненты Vue.js?

Компоненты являются сердцем и душой приложений Vue.js. Представьте их как reusable фрагменты кода, которые инкапсулируют HTML, CSS и JavaScript функциональность. Так же, как вы можете использовать различные кубики LEGO для постройки замка, вы можете использовать различные компоненты для создания сложного веб-приложения.

Вот пример простого компонента Vue:

<template>
<div class="greeting">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
data() {
return {
message: "Hello, Vue Component!"
}
}
}
</script>

<style scoped>
.greeting {
color: blue;
}
</style>

Давайте разберем это:

1. Раздел <template> содержит HTML структуру нашего компонента.
2. Раздел <script> определяет логику и данные компонента.
3. Раздел <style> (с атрибутом scoped) содержит CSS, который применяется только к этому компоненту.

Создание и использование компонентов

Теперь, когда мы знаем, как выглядят компоненты, давайте создадим один и используем его в нашем приложении!

Шаг 1: Создание нового компонента

Создайте новый файл叫做 Greeting.vue в папке components вашего проекта:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ greeting }}</h2>
</div>
</template>

<script>
export default {
data() {
return {
greeting: "Welcome to Vue.js!"
}
}
}
</script>

<style scoped>
.greeting {
font-style: italic;
color: green;
}
</style>

Шаг 2: Использование компонента в вашем приложении

Теперь давайте используем этот компонент в нашем основном файле App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting />
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'

export default {
name: 'App',
components: {
Greeting
}
}
</script>

Вот что происходит:

1. Мы импортируем компонент Greeting.
2. Мы регистрируем его в опции components нашего компонента App.
3. Мы используем его в шаблоне с тегом <Greeting />.

И вуаля! Вы только что создали и использовали ваш первый компонент Vue!

Props: Передача данных в компоненты

Props являются такими себе магическими трубами, которые позволяют вам передавать данные от родительского компонента к дочернему. Давайте усовершенствуем наш компонент Greeting, чтобы он принимал пользовательское сообщение:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ customGreeting }}</h2>
</div>
</template>

<script>
export default {
props: ['message'],
computed: {
customGreeting() {
return `${this.message} Welcome to Vue.js!`
}
}
}
</script>

Теперь мы можем использовать его следующим образом в нашем App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting message="Hello, dear student!" />
<Greeting message="Greetings, Vue enthusiast!" />
</div>
</template>

Не правда ли, это классно? Мы можем использовать один и тот же компонент с разными сообщениями!

Передача событий: Обратная связь от ребенка к родителю

While props позволяют родителю communicate с ребенком, события enable обратную связь от ребенка к родителю. Это как если бы ребенок просил у родителей мороженое!

Давайте создадим компонент Button, который emits событие при нажатии:

<!-- Button.vue -->
<template>
<button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('button-clicked', 'The button was clicked!')
}
}
}
</script>

Теперь давайте используем это в нашем App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Button label="Click me!" @button-clicked="handleButtonClick" />
<p>{{ message }}</p>
</div>
</template>

<script>
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Button
},
data() {
return {
message: ''
}
},
methods: {
handleButtonClick(msg) {
this.message = msg
}
}
}
</script>

Когда кнопка нажата, она emits событие, на которое родительский компонент слушает и отвечает. Это как harmonious conversация в семье!

Слоты: Гибкое содержимое компонентов

Слоты являются такими себе placeholderами в ваших компонентах, которые вы можете заполнить любым содержимым, которое хотите. Они incredibly полезны для создания гибких, reusable компонентов.

Давайте создадим компонент Card с слотом:

<!-- Card.vue -->
<template>
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
props: ['title']
}
</script>

<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.card-header {
background-color: #f1f1f1;
padding: 5px;
}
</style>

Теперь мы можем использовать этот Card компонент с разным содержимым:

<!-- App.vue -->
<template>
<div id="app">
<Card title="Welcome">
<p>Welcome to our Vue.js tutorial!</p>
</Card>
<Card title="About Components">
<ul>
<li>Components are reusable</li>
<li>They can have props</li>
<li>They can emit events</li>
</ul>
</Card>
</div>
</template>

<script>
import Card from './components/Card.vue'

export default {
name: 'App',
components: {
Card
}
}
</script>

Динамические компоненты

Динамические компоненты позволяют вам переключаться между различными компонентами dinamicamente. Это как если бы у вас был瑞士 армейский нож компонентов!

Давайте создадим простой пример:

<!-- App.vue -->
<template>
<div id="app">
<button @click="currentComponent = 'Greeting'">Show Greeting</button>
<button @click="currentComponent = 'Button'">Show Button</button>
<component :is="currentComponent"></component>
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Greeting,
Button
},
data() {
return {
currentComponent: 'Greeting'
}
}
}
</script>

В этом примере мы используем элемент <component> с атрибутом is, чтобы dinamicamente отрисовывать либо Greeting, либо Button компонент в зависимости от того, какая кнопка была нажата.

Заключение

Поздравляю! Вы только что сделали свои первые шаги в чудесный мир компонентов Vue.js. Помните, как и с любым навыком, практика делает perfect. Не бойтесь experiment и создавать свои собственные компоненты. Before вы знаете, вы будете создавать сложные, интерактивные веб-приложения с легкостью!

Вот quick reference таблица функциональных возможностей компонентов, которые мы рассмотрели:

Feature	Описание
Основная структура	Template, Script и Style разделы
Props	Передача данных от родителя к ребенку
События	Обратная связь от ребенка к родителю
Слоты	Гибкие placeholder для содержимого
Динамические компоненты	Переключение между компонентами на лету

Продолжайте программировать, продолжайте учиться и, что самое главное, получайте удовольствие от работы с Vue.js!

Credits: Image by storyset