Комментарии 14
Че то как то скучно, неужели не было больше примеров, как минимум хотя бы описания когда можно обойтись без использования props, а использовать provide/inject. А так сухая выжика из доки с парочкой банальных примеров.
А в чем смысл статьи? Пропсы - это базовый термин для Vue, который излагается чуть ли не в первых страницах доки или любого курса, нет смысла его разбирать, тем более отдельно от остальных тем. Имхо, статья должна быть или всеобъемлющей (по теме) или иметь новизну, чтобы понравиться читателю, а это ни рыба, ни мясо.
Статья не для новичков, а для предновичков
Увольте своего Никиту
И где кстати пропсы именно для Vue 3?
Тут только Vue 2 (Ptions API) синтаксис.
Где валидация, типизация и прочее?
выяснили, как они могут помочь соблюдать принцип DRY (не повторяйся)
При строгой типизации пропсов вы можете быть уверены, что дочерний компонент получит именно тот тип данных, который вам нужен.
То что подсвечено действительно камень в сторону автора оригинала статьи. Однако разберемся с указанными проблемами:
Бесспорно по 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