Что такое компоненты

Компоненты - это основа для создания пользовательских интерфейсов. Они позволяют создавать сложные интерфейсы, разбивая их на более маленькие, независимые и повторно используемые части.

Создание экземпляра приложения

Приложение Vue.JS представляет собою экземпляр класса Vue. Как правило после создания приложения оно монтируется в DOM дерево к существующему HTML-элементу.

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

import Vue from "vue";
import RootComponent from "./RootComponent.vue";
const app = Vue.createApp(RootComponent);
app.mount("#app");

Корневой компонент

Корневой компонент используется как стартовая точка отрисовки приложения. Он может содержать другие компоненты, которые будут включены в итоговый пользовательский интерфейс. Большинство приложений организованны в виде дерева компонентов, каждый из которых выполняет свою логику и отображает свой интерфейс. Многие из компонентов используются в разных частях приложения.

Корневой компонент
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Входные параметры компонента

Очень часто необходимо передать какие-то данные в компонент. Для этого в родительском компоненте необходимо использовать пользователские атрибуты или директиву v-bind, а в дочернем компоненте объявить входные параметры с помощью функции defineProps.

<template>
  <ChildComponent text="Hello world!" :color="textColor" />
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
import { ref } from "vue";
const textColor = ref("red");
</script>

<template>
  <p :style="{ color: color }">{{ text }}</p>
</template>

<script setup>
import { defineProps } from "vue";
defineProps(["text", "color"]);
</script>

События в компоненте

Очень часто дочернему компоненту необходимо сообщить в родительский о каком-то событии. Для этого в дочернем компоненте необходимо объявить выходные события с помощью функции defineEmits а в родительском компоненте использовать директиву v-on.

<template>
  <ChildComponent @click="handleClick" />
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
const handleClick = () => {
  console.log("Button clicked!");
};
</script>

<template>
  <button @click="emit('click')">Click me</button>
</template>

<script setup>
import { defineEmits } from "vue";
const emit = defineEmits(["click"]);
</script>

Слоты

Использование слотов дает возможность родительскому компоненту преопределить часть шаблона дочернего. Для этого дочерний компонент определяет <slot>, а родительский компонент передаает содержимое слота используя тег <template>. В процессе работы содержимое блока <slot> будет переопределено блоком <template>.

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
</script>

<template>
  <div>
    <slot name="header">
      Default header
    </slot>
  </div>
  Content
</template>
Общее описание
Vue.js - прогрессивный фреймворк для создания пользовательских интерфейсов
SFC компоненты
SFC компоненты - это компоненты, которые представлены в виде отдельных файлов с расширением `.vue` и содержат в себе шаблон, логику и стили.