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

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Нажми меня</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const message = ref('Привет, мир!')
 
function changeMessage() {
  message.value = 'Компоненты Vue 3 потрясающи!'
}
</script>
 
<style scoped>
.greeting {
  text-align: center;
  padding: 20px;
}
</style>

<template>
  <div class="task-item" :class="{ completed: task.completed }">
    <input type="checkbox" v-model="task.completed">
    <span>{{ task.title }}</span>
    <button @click="removeTask">Удалить</button>
  </div>
</template>
 
<script setup>
import { defineProps, defineEmits, toRefs } from 'vue'
 
const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})
 
const emit = defineEmits(['remove', 'update'])
 
// Извлекаем реактивные свойства из объекта props
const { task } = toRefs(props)
 
// Метод удаления задачи
const removeTask = () => {
  emit('remove', task.value.id)
}
 
// Автоматически отправляем событие update при изменении задачи
watch(() => task.value.completed, (newValue) => {
  emit('update', { id: task.value.id, completed: newValue })
})
</script>
 
<style scoped>
.task-item {
  display: flex;
  padding: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

<script setup>
import { ref } from 'vue'
import { usePagination } from './composables/usePagination'
 
const allProducts = ref([/* список продуктов */])
const { 
  currentPage, 
  totalPages, 
  paginatedItems: products,
  nextPage, 
  prevPage 
} = usePagination(allProducts, 12)
</script>
 
<template>
  <div class="products-grid">
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
  
  <div class="pagination">
    <button :disabled="currentPage === 1" @click="prevPage">Предыдущая</button>
    <span>{{ currentPage }} из {{ totalPages }}</span>
    <button :disabled="currentPage === totalPages" @click="nextPage">Следущая</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useElementSize } from './composables/useElementSize'
 
const containerRef = ref(null)
const { width, height } = useElementSize(containerRef)
</script>
 
<template>
  <div ref="containerRef" class="container">
    <p>Ширина: {{ width }}px, Высота: {{ height }}px</p>
  </div>
</template>

<template>
  <!-- HTML-разметка компонента -->
</template>
 
<script setup>
  // JavaScript-логика компонента
</script>
 
<style scoped>
  /* CSS-стили компонента */
</style>

<!-- AppButton.vue -->
<template>
  <button 
    :class="['app-button', [INLINE]app-button--${type}[/INLINE]]" 
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue'
 
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'danger'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
 
const emit = defineEmits(['click'])
 
function handleClick(event) {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>
 
<style scoped>
.app-button {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}
 
.app-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
 
.app-button--primary {
  background-color: #3498db;
  color: white;
}
 
.app-button--secondary {
  background-color: #ecf0f1;
  color: #333;
  border: 1px solid #ddd;
}
 
.app-button--danger {
  background-color: #e74c3c;
  color: white;
}
</style>

   <script setup>
   import { ref } from 'vue'
   
   const count = ref(0)
   
   function increment() {
     count.value++
   }
   </script>
   
   <template>
     <button @click="increment">Счетчик: {{ count }}</button>
   </template>

   <script>
   export default {
     data() {
       return {
         count: 0
       }
     },
     methods: {
       increment() {
         this.count++
       }
     }
   }
   </script>
   
   <template>
     <button @click="increment">Счетчик: {{ count }}</button>
   </template>

<template>
  <!-- Текстовая интерполяция -->
  <p>{{ message }}</p>
  
  <!-- Привязка атрибутов -->
  <img :src="imageUrl" :alt="imageAlt">
  
  <!-- Условный рендеринг -->
  <div v-if="isVisible">Показывается при isVisible === true</div>
  <div v-else>Показывается при isVisible === false</div>
  
  <!-- Циклический рендеринг -->
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
  
  <!-- Обработка событий -->
  <button @click="handleClick">Нажми меня</button>
  
  <!-- Двусторонняя привязка данных -->
  <input v-model="inputValue">
</template>
 
<script setup>
import { ref, reactive } from 'vue'
 
// Реактивные данные
const message = ref('Привет, Vue!')
const imageUrl = ref('https://example.com/image.jpg')
const imageAlt = ref('Описание изображения')
const isVisible = ref(true)
const inputValue = ref('')
 
// Реактивные массивы/объекты
const items = reactive([
  { id: 1, name: 'Элемент 1' },
  { id: 2, name: 'Элемент 2' },
  { id: 3, name: 'Элемент 3' }
])
 
// Обработчики событий
function handleClick() {
  alert('Кнопка была нажата!')
}
</script>

<template>
  <!-- Слишком сложно для шаблона -->
  <div>
    {{ 
      items.filter(item => item.active)
           .map(item => item.price)
           .reduce((total, price) => total + price, 0)
           .toFixed(2) 
    }}
  </div>
  
  <!-- Гораздо лучше -->
  <div>{{ totalActiveItemsPrice }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'
 
const items = ref([
  { id: 1, name: 'Товар 1', price: 100, active: true },
  { id: 2, name: 'Товар 2', price: 200, active: false },
  { id: 3, name: 'Товар 3', price: 300, active: true }
])
 
const totalActiveItemsPrice = computed(() => {
  return items.value
    .filter(item => item.active)
    .map(item => item.price)
    .reduce((total, price) => total + price, 0)
    .toFixed(2)
})
</script>

<template>
  <div>
    <p>Счетчик: {{ count }}</p>
    <button @click="increment">Увеличить</button>
    <button @click="decrement">Уменьшить</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const count = ref(0)
 
function increment() {
  count.value++
}
 
function decrement() {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<script setup>
import { ref, watch } from 'vue'
 
const searchQuery = ref('')
const searchResults = ref([])
 
// Простой watch
watch(searchQuery, async (newQuery, oldQuery) => {
  if (newQuery.trim()) {
    const results = await fetchSearchResults(newQuery)
    searchResults.value = results
  } else {
    searchResults.value = []
  }
})
 
// Можно следить за несколькими источниками
const page = ref(1)
const perPage = ref(10)
 
watch([page, perPage], async ([newPage, newPerPage]) => {
  // Загрузка данных с учетом пагинации
  const data = await fetchPaginatedData(newPage, newPerPage)
  // ...
})
 
// Для глубокого отслеживания объектов
const user = reactive({
  name: 'Иван',
  preferences: {
    darkMode: false,
    notifications: true
  }
})
 
watch(() => user.preferences, (newPrefs) => {
  // Сохранить предпочтения пользователя
  saveUserPreferences(newPrefs)
}, { deep: true })
</script>

<style scoped>
.button {
  background: blue;
  color: white;
}
</style>

<style scoped>
/* Влияет только на элементы внутри текущего компонента */
.card {
  background: white;
  border-radius: 8px;
}
 
/* При использовании :deep() селектор проникает в дочерние компоненты */
:deep(.title) {
  font-size: 20px;
  color: #333;
}
</style>

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Привет, мир!</h1>
  </div>
</template>
 
<style module>
.container {
  padding: 20px;
  background: #f5f5f5;
}
 
.title {
  color: #42b883;
}
</style>

<template>
  <button :class="[styles.button, styles.primary]">Кнопка</button>
</template>
 
<style module="styles">
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
 
.primary {
  background: #42b883;
  color: white;
}
</style>

<template>
  <div class="card" style="--card-color: color">
    Цвет карточки меняется динамически
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const color = ref('#42b883')
</script>
 
<style scoped>
.card {
  background-color: var(--card-color);
  padding: 16px;
  border-radius: 8px;
}
</style>

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'
 
// 1. Компонент инициализирован (данные уже реактивны)
// Обратите внимание: тут нет специального хука, это
// просто происходит при выполнении кода в <script setup>
 
// 2. Компонент примонтирован к DOM
onMounted(() => {
  console.log('Компонент примонтирован, DOM доступен')
  initializeExternalLibrary() // Инициализация сторонней библиотеки
})
 
// 3. Компонент обновлен
onUpdated(() => {
  console.log('Компонент обновлен')
  // Осторожно с изменением реактивных данных в onUpdated -
  // это может привести к бесконечному циклу!
})
 
// 4. Компонент будет уничтожен
onUnmounted(() => {
  console.log('Компонент будет уничтожен')
  cleanupResources() // Освобождение ресурсов
})
</script>

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import maplibregl from 'maplibre-gl'
 
const mapContainer = ref(null)
let map = null
 
onMounted(() => {
  if (mapContainer.value) {
    map = new maplibregl.Map({
      container: mapContainer.value,
      style: 'https://demotiles.maplibre.org/style.json',
      center: [37.618423, 55.751244], // Москва
      zoom: 10
    })
    
    map.on('load', () => {
      // Добавление слоёв и маркеров после загрузки карты
    })
  }
})
 
onUnmounted(() => {
  if (map) {
    map.remove() // Правильно уничтожаем объект карты при демонтаже компонента
  }
})
</script>
 
<style scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style>

<script setup>
import { ref, onErrorCaptured } from 'vue'
 
const hasError = ref(false)
const errorMessage = ref('')
 
onErrorCaptured((err, instance, info) => {
  hasError.value = true
  errorMessage.value = err.message
  console.error(`Ошибка в компоненте: ${info}`, err)
  
  // Возвращаем false, чтобы предотвратить всплытие ошибки выше
  return false
})
</script>
 
<template>
  <div>
    <!-- Показываем резервный UI при ошибке -->
    <div v-if="hasError" class="error-container">
      Извините, произошла ошибка: {{ errorMessage }}
    </div>
    
    <!-- Иначе показываем обычный контент -->
    <slot v-else></slot>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
 
const users = ref([])
const loading = ref(true)
const error = ref(null)
 
onMounted(async () => {
  try {
    loading.value = true
    const response = await fetch('https://api.example.com/users')
    users.value = await response.json()
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})
</script>

<!-- Родительский компонент -->
<template>
<div>
  <UserProfile 
    :user-id="123" 
    :is-admin="true"
    :settings="userSettings"
  />
</div>
</template>
 
<script setup>
import { reactive } from 'vue'
import UserProfile from './UserProfile.vue'
 
const userSettings = reactive({
theme: 'dark',
notifications: true
})
</script>

<!-- UserProfile.vue -->
<template>
<div class="user-profile">
  <h2>Профиль пользователя #{{ userId }}</h2>
  <!-- Используем принятые props -->
  <AdminPanel v-if="isAdmin" />
  <ThemeSwitcher :current-theme="settings.theme" />
</div>
</template>
 
<script setup>
import { defineProps } from 'vue'
import AdminPanel from './AdminPanel.vue'
import ThemeSwitcher from './ThemeSwitcher.vue'
 
const props = defineProps({
userId: {
  type: Number,
  required: true
},
isAdmin: {
  type: Boolean,
  default: false
},
settings: {
  type: Object,
  default: () => ({
    theme: 'light',
    notifications: false
  })
}
})
</script>

const props = defineProps<{
  username: string
  age: number
  profile?: {
    avatar: string
    bio: string
  }
  role?: 'admin' | 'user' | 'guest'
}>()

const props = withDefaults(defineProps<{
  username: string
  age: number
  profile?: {
    avatar: string
    bio: string
  }
  role?: 'admin' | 'user' | 'guest'
}>(), {
  profile: () => ({ avatar: 'default.jpg', bio: '' }),
  role: 'user'
})

   <!-- Vue 2 -->
   <CustomInput v-model="searchText" />
   
   <!-- В компоненте -->
   props: ['value'],
   methods: {
     updateValue(newValue) {
       this.$emit('input', newValue)
     }
   }
   
   <!-- Vue 3 -->
   <CustomInput v-model="searchText" />
   
   <!-- В компоненте -->
   <script setup>
   const props = defineProps(['modelValue'])
   const emit = defineEmits(['update:modelValue'])
   
   function updateValue(newValue) {
     emit('update:modelValue', newValue)
   }
   </script>

   <UserForm
     v-model:name="userData.name"
     v-model:email="userData.email"
   />
   
   <!-- В компоненте UserForm -->
   <script setup>
   const props = defineProps(['name', 'email'])
   const emit = defineEmits(['update:name', 'update:email'])
   
   function updateName(name) {
     emit('update:name', name)
   }
   
   function updateEmail(email) {
     emit('update:email', email)
   }
   </script>

<!-- ChildComponent.vue -->
<template>
<button @click="sendDataToParent">Отправить данные</button>
</template>
 
<script setup>
import { defineEmits } from 'vue'
 
const emit = defineEmits(['data-sent', 'status-changed'])
 
function sendDataToParent() {
const data = { id: 1, name: 'Тестовые данные' }
emit('data-sent', data)
}
</script>

<!-- ParentComponent.vue -->
<template>
<div>
  <ChildComponent 
    @data-sent="handleDataFromChild"
    @status-changed="updateStatus" 
  />
</div>
</template>
 
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const receivedData = ref(null)
const status = ref('idle')
 
function handleDataFromChild(data) {
receivedData.value = data
console.log('Получены данные:', data)
}
 
function updateStatus(newStatus) {
status.value = newStatus
}
</script>

<script setup lang="ts">
// Определяем типизированные эмиты
const emit = defineEmits<{
  (e: 'update:selectedId', id: number): void
  (e: 'item-click', item: { id: number, name: string }): void
  (e: 'change-page', page: number): void
}>()
 
function selectItem(item: { id: number, name: string }) {
  emit('update:selectedId', item.id) // ✓ Правильный тип
  emit('item-click', item) // ✓ Правильный тип
  
  // Следующие строки вызовут ошибки TypeScript:
  // emit('unknown-event', data) ✗ Событие не существует
  // emit('update:selectedId', '123') ✗ Неверный тип данных
  // emit('item-click', { wrongProp: true }) ✗ Несоответствие типу
}
</script>

<!-- App.vue -->
<script setup>
import { provide, readonly, ref } from 'vue'
 
const theme = ref('light')
const changeTheme = (newTheme) => {
  theme.value = newTheme
}
 
// Предоставляем и значение, и функцию для его изменения
provide('theme', readonly(theme)) // readonly для защиты от прямого изменения
provide('changeTheme', changeTheme)
</script>
 
<!-- DeepNestedComponent.vue (может быть вложен глубоко) -->
<template>
  <div :class="`theme-${theme}`">
    <button @click="toggleTheme">
      Сменить тему на {{ theme === 'light' ? 'тёмную' : 'светлую' }}
    </button>
  </div>
</template>
 
<script setup>
import { inject } from 'vue'
 
const theme = inject('theme')
const changeTheme = inject('changeTheme')
 
function toggleTheme() {
  changeTheme(theme.value === 'light' ? 'dark' : 'light')
}
</script>

<template>
  <div>
    <p>Счётчик: {{ counter.count }}</p>
    <p>Удвоенный счётчик: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Увеличить</button>
    <button @click="resetToRandom">Сбросить</button>
  </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter'
 
const counter = useCounterStore()
 
function resetToRandom() {
  // Можно изменять множество свойств одновременно
  counter.$patch({
    count: Math.round(Math.random() * 100),
    name: 'Случайный счётчик'
  })
}
 
// Подписка на изменения хранилища
counter.$subscribe((mutation, state) => {
  console.log('Хранилище изменено:', mutation)
  // Здесь можно сохранить изменения в localStorage
})
 
// Загрузка начальных данных
counter.fetchInitialCount()
</script>

<template>
  <div class="profile-card">
    <UserAvatar :src="user.avatarUrl" :size="size" />
    <UserInfo :user="user" />
    <UserActions :userId="user.id" @follow="handleFollow" />
  </div>
</template>

<!-- UserListContainer.vue - контейнерный компонент -->
<script setup>
import { ref, onMounted } from 'vue'
import UserList from './UserList.vue'
 
const users = ref([])
const isLoading = ref(true)
 
onMounted(async () => {
  try {
    const response = await fetch('/api/users')
    users.value = await response.json()
  } finally {
    isLoading.value = false
  }
})
</script>
 
<template>
  <div>
    <UserList 
      :users="users" 
      :is-loading="isLoading" 
    />
  </div>
</template>

<!-- UserList.vue - презентационный компонент -->
<script setup>
defineProps({
  users: Array,
  isLoading: Boolean
})
</script>
 
<template>
  <div class="user-list">
    <LoadingSpinner v-if="isLoading" />
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<template>
  <div v-if="isOpen" class="modal-wrapper">
    <div class="modal">
      <header class="modal-header">
        <slot name="header">
          <h2>{{ title }}</h2>
        </slot>
        <button @click="close" class="close-btn">×</button>
      </header>
      
      <div class="modal-body">
        <slot></slot>
      </div>
      
      <footer class="modal-footer">
        <slot name="footer">
          <button @click="close">Закрыть</button>
        </slot>
      </footer>
    </div>
  </div>
</template>

<AppModal :is-open="showModal" @close="showModal = false" title="Редактирование профиля">
  <template #header>
    <h3>Индивидуальный заголовок</h3>
  </template>
  
  <form @submit.prevent="saveProfile">
    <!-- Содержимое формы -->
  </form>
  
  <template #footer>
    <button @click="saveProfile">Сохранить</button>
    <button @click="showModal = false">Отмена</button>
  </template>
</AppModal>

<script setup>
import { vFocus } from './directives/vFocus'
</script>
 
<template>
  <input v-focus type="text" />
</template>

<template>
  <div class="card">
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<div class="layout">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<!-- List.vue -->
<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

<List :items="fruits">
  <template #default="{ item, index }">
    <strong>{{ index + 1 }}:</strong> {{ item.name }} - {{ item.color }}
  </template>
</List>

<template>
  <button 
    v-for="tab in tabs" 
    :key="tab.name" 
    @click="currentTab = tab.name"
  >
    {{ tab.label }}
  </button>
 
  <component :is="currentTabComponent" />
</template>
 
<script setup>
import { ref, computed } from 'vue'
import HomeTab from './HomeTab.vue'
import ProfileTab from './ProfileTab.vue'
import SettingsTab from './SettingsTab.vue'
 
const tabs = [
  { name: 'home', label: 'Главная', component: HomeTab },
  { name: 'profile', label: 'Профиль', component: ProfileTab },
  { name: 'settings', label: 'Настройки', component: SettingsTab }
]
 
const currentTab = ref('home')
 
const currentTabComponent = computed(() => {
  return tabs.find(tab => tab.name === currentTab.value)?.component
})
</script>

<keep-alive>
  <component :is="currentTabComponent" />
</keep-alive>

<script setup>
import { useGeolocation } from './composables/useGeolocation'
 
const { coordinates, error, isSupported } = useGeolocation()
</script>
 
<template>
  <div>
    <p v-if="!isSupported">Геолокация не поддерживается</p>
    <p v-else-if="error">Ошибка: {{ error }}</p>
    <p v-else>
      Ваши координаты: {{ coordinates.latitude }}, {{ coordinates.longitude }}
    </p>
  </div>
</template>

<script setup>
import { useLocalStorage } from './composables/useLocalStorage'
 
const [darkMode, resetTheme] = useLocalStorage('dark-mode', false)
 
function toggleTheme() {
  darkMode.value = !darkMode.value
}
</script>

<template>
  <button @click="showModal = true">Открыть модальное окно</button>
  
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <h2>Модальное окно</h2>
      <p>Это модальное окно, телепортированное в body!</p>
      <button @click="showModal = false">Закрыть</button>
    </div>
  </Teleport>
</template>
 
<script setup>
import { ref } from 'vue'
 
const showModal = ref(false)
</script>

<script setup>
import vAutofocus from './directives/vAutofocus'
</script>
 
<template>
  <input v-autofocus type="text" placeholder="Этот инпут получит фокус автоматически" />
</template>

<div v-tooltip:top.persistent="'Подсказка при наведении'">Наведите на меня</div>

<script setup>
import { ref } from 'vue'
import vDraggable from './directives/vDraggable'
 
const position = ref({ x: 100, y: 100 })
 
function handleDragEnd(pos) {
  position.value = pos
  console.log(`Элемент перемещен в: x=${pos.x}, y=${pos.y}`)
}
</script>
 
<template>
  <div 
    v-draggable="{ 
      initial: position, 
      onDragEnd: handleDragEnd 
    }"
    class="draggable-box"
  >
    Перетащи меня!
  </div>
</template>

<template>
  <h1 v-animate="{ duration: 1000 }">Плавно появляющийся заголовок</h1>
  <p v-animate="{ delay: 300, scale: [0.8, 1] }">И текст с задержкой</p>
</template>

<script setup>
import { ref } from 'vue'
import { useIntersectionObserver } from './composables/useIntersectionObserver'
import vInViewDirective from './directives/vInView'
 
const { observe, unobserve } = useIntersectionObserver()
const vInView = vInViewDirective({ observe, unobserve })
 
function handleElementVisible(el) {
  el.classList.add('animate-in')
}
</script>
 
<template>
  <div class="scroll-container">
    <section v-in-view="handleElementVisible" class="section">
      Эта секция анимируется при попадании в поле зрения
    </section>
    <!-- Другие секции -->
  </div>
</template>

<script setup>
import vAutofocus from './directives/vAutofocus'
 
// Автоматически доступна в шаблоне как v-autofocus
</script>

<script setup>
import { usePermissions } from './composables/usePermissions'
import vPermissionDirective from './directives/vPermission'
import { onMounted } from 'vue'
 
const permissionsService = usePermissions()
const vPermission = vPermissionDirective(permissionsService)
 
onMounted(() => {
  permissionsService.loadUserPermissions()
})
</script>
 
<template>
  <div class="admin-panel">
    <button v-permission="'users.create'">Создать пользователя</button>
    <div v-permission.hide="'reports.view'">
      Отчёты доступны только с правами на просмотр
    </div>
  </div>
</template>

<script setup>
// Не делайте так!
const props = defineProps(['user'])
 
function updateName() {
  props.user.name = 'Новое имя' // Изменяем объект props напрямую
}
</script>

<script setup>
const props = defineProps(['user'])
const emit = defineEmits(['update:user'])
 
function updateName() {
  const updatedUser = { ...props.user, name: 'Новое имя' }
  emit('update:user', updatedUser)
}
</script>