Комментарии 14
Че то как то скучно, неужели не было больше примеров, как минимум хотя бы описания когда можно обойтись без использования props, а использовать provide/inject. А так сухая выжика из доки с парочкой банальных примеров.
А в чем смысл статьи? Пропсы - это базовый термин для Vue, который излагается чуть ли не в первых страницах доки или любого курса, нет смысла его разбирать, тем более отдельно от остальных тем. Имхо, статья должна быть или всеобъемлющей (по теме) или иметь новизну, чтобы понравиться читателю, а это ни рыба, ни мясо.
Статья не для новичков, а для предновичков
Увольте своего Никиту
И где кстати пропсы именно для Vue 3?
Тут только Vue 2 (Ptions API) синтаксис.
Где валидация, типизация и прочее?
выяснили, как они могут помочь соблюдать принцип DRY (не повторяйся)
![](https://habrastorage.org/getpro/habr/upload_files/c76/13e/532/c7613e53262dede298bb2e621e3d00b1.png)
При строгой типизации пропсов вы можете быть уверены, что дочерний компонент получит именно тот тип данных, который вам нужен.
![](https://habrastorage.org/getpro/habr/upload_files/0be/d39/005/0bed39005a3135d49e6c2d11dab814cd.png)
То что подсвечено действительно камень в сторону автора оригинала статьи. Однако разберемся с указанными проблемами:
Бесспорно по Vue нет FQN из MAM-а. Однако можно попытаться решить проблему 3мя путями:
Script Setup
<template>
<Test />
</template>
<script setup>
import Test from './components/Test.vue'
</script>
Global component (определяем компонент глобально и используем его везде) или миксином с нужными компонентами
Auto-import (имеются плагины, которые по определенным правилам из указанных папок по указанным правилам генерирует имена компонентов и при совпадении подставлять автоматический импорт)
Насчет массива. В случае использования JS, можно добавить валидатор, который явно в рантайме проверит значения. Однако при переключении на TS появляется большой набор вариантов решить эту проблему. Те там можно будет явно указать какой тип и с какими параметрами используется в пропсе (расписывание отдельных вариантов нахожу тривиальным).
И все 3 решения так или иначе плохи.
А на самом деле - и проблемы то нет)
Спасибо вам и всем другим комментаторам за активную обратную связь! При переводе мы преследовали цель — помочь тем, кто находится на начальном этапе изучения нового для себя фреймворка, подсказать, что есть определенные способы передачи данных между компонентами. Обязательно обратим внимание на ваши уточнения. В будущем, возможно, выкатим статью про указанные кейсы)
В статье приведены примеры импорта компонентов, которые будут понятны новичкам. Один из комментаторов ниже обратил внимание на отсутствие таких вещей, как Global component, и в будущем мы обязательно о них расскажем.
Увы, в оригинале статьи автор не делает упор на использовании Vue в тандеме с TypeScript, поэтому более точная типизация массива опущена. Однако спасибо за дельное замечание, если у наших читателей будет интерес к теме Vue + TypeScript, мы обязательно напишем об этом отдельно
Я правильно понимаю, что кто-то переписал себе в блог пересказ официальной документации с английского на английский, а тут просто перевели на русский?
Но, правда, я узнал, что функция setup с импортом всяких ref и reactive — это ещё не compositoin API, а compositon — это конкретно <script setup>, хотя я ещё проверю эту информацию, а то сомневаюсь.
И то и то composition. <script setup> это просто синтаксический сахар для function setup(){}.
Действительно, вы правы, Composition API — это использование функции setup внутри тега <script> с применением описанных вами технологий, которые стали доступны в третьей версии Vue. Однако функцию setup можно использовать и описанным в статье образом с помощью <script setup>
Пересказ документации, при этом смогли потерять часть про default, required, validator
Как использовать пропсы для передачи данных дочерним компонентам в Vue 3