\n\n\n\n\n\n\n\n```\n\nРегистрация: локальная (`import` в SFC) или глобальная (`app.component`). Данные вниз — props, события вверх — emit; не мутируйте props. `v-model` на компоненте — тоже props+emit. На junior-собеседовании сильный ответ = определение + маленький пример + упоминание одностороннего потока данных.\n\nКритерии хорошего компонента: одна ответственность, понятные props, явные emits, слоты для гибкости, без жёсткой связи с глобальным store без нужды. Назовите SFC (`.vue`) как стандартный формат. Глобальная регистрация удобна для UI-kit, но ухудшает tree-shaking и прозрачность зависимостей."}}}

Что такое компоненты во Vue? Приведите пример

Vue · junior · сложность 4

Войти, чтобы отмечать

Резюме темы

Компонент во Vue — изолированный переиспользуемый блок UI: свой шаблон (или render), локальное состояние, входной API через props, выходной — через emits, проекция разметки — через slots. Большое приложение собирается деревом таких блоков.

<!-- UserCard.vue -->
<script setup>
defineProps({
  name: { type: String, required: true },
  role: { type: String, default: 'user' },
})
const emit = defineEmits(['select'])
</script>

<template>
  <article class="card" @click="emit('select')">
    <h3>{{ name }}</h3>
    <p>{{ role }}</p>
    <slot />
  </article>
</template>

<!-- App.vue -->
<script setup>
import UserCard from './UserCard.vue'
function onSelect() { /* ... */ }
</script>

<template>
  <UserCard name="Анна" role="admin" @select="onSelect">
    <button>Написать</button>
  </UserCard>
</template>

Регистрация: локальная (import в SFC) или глобальная (app.component). Данные вниз — props, события вверх — emit; не мутируйте props. v-model на компоненте — тоже props+emit. На junior-собеседовании сильный ответ = определение + маленький пример + упоминание одностороннего потока данных.

Критерии хорошего компонента: одна ответственность, понятные props, явные emits, слоты для гибкости, без жёсткой связи с глобальным store без нужды. Назовите SFC (.vue) как стандартный формат. Глобальная регистрация удобна для UI-kit, но ухудшает tree-shaking и прозрачность зависимостей.

Загрузка…