{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Props"},{"type":"text","text":" во Vue — это "},{"type":"text","marks":[{"type":"italic"}],"text":"входные параметры компонента"},{"type":"text","text":", с помощью которых родитель передаёт данные дочернему компоненту."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"},{"type":"hardBreak"},{"type":"text","text":"👉 "},{"type":"text","marks":[{"type":"bold"}],"text":"props — это способ передать данные “сверху вниз”, от родителя к ребёнку."},{"type":"hardBreak"},{"type":"text","text":"👉 Это аналог аргументов функции, но для компонентов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🟩 Простой пример"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Родитель:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Дочерний компонент ("},{"type":"text","marks":[{"type":"code"}],"text":"UserCard.vue"},{"type":"text","text":"):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь дочерний компонент получает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"name=\"Tim\""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"age=\"28\""}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Для чего нужны props?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Props решают несколько задач:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Передать данные из родителя в ребёнка"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например: текст кнопки, пользователя, список товаров, настройки компонента."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Делать компоненты универсальными"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Один компонент — много вариантов."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Создавать конфигурацию поведения"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например: "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔍 Как объявлять props в Vue 3?"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"➤ Способ 1. Через "},{"type":"text","marks":[{"type":"code"}],"text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После этого "},{"type":"text","marks":[{"type":"code"}],"text":"title"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"isActive"},{"type":"text","text":" доступны в шаблоне."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"➤ Способ 2. Через Options API (старый стиль)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎛 Типы пропсов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно описывать:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Тип"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"title: String\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Тип + значение по умолчанию"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"count: { type: Number, default: 0 }\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Required (обязательный)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"user: { type: Object, required: true }\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔ Валидация"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"age: { \n type: Number,\n validator: value => value > 0 \n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🚫 Нельзя менять props внутри компонента"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это важное правило:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ неправильно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"props.count++\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✔ правильно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"создать локальную копию"},{"type":"hardBreak"},{"type":"text","text":"или"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"передавать событие "},{"type":"text","marks":[{"type":"code"}],"text":"emit"},{"type":"text","text":" родителю, чтобы он обновил значение"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"📡 Односторонний поток данных"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Props идут "},{"type":"text","marks":[{"type":"bold"}],"text":"только сверху вниз"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Parent → Child\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это делает работу приложения предсказуемой и уменьшает баги."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Пример: кнопка, настраиваемая через props"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использование:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Итог (шпаргалка)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Props — это входные параметры компонента."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Они позволяют:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"передавать данные от родителя к ребёнку,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"конфигурировать интерфейс,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"делать компоненты универсальными."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue 3 props объявляют через:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"defineProps({ ... })\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Props "},{"type":"text","marks":[{"type":"italic"}],"text":"нельзя изменять"},{"type":"text","text":", но их можно валидировать, делать обязательными и задавать им значения по умолчанию."}]}]}

Что такое props во Vue?

Комментарии