{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Да, "},{"type":"text","marks":[{"type":"bold"}],"text":"в одном компоненте можно использовать несколько слотов"},{"type":"text","text":" — и это стандартная практика в Vue."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для этого используются "},{"type":"text","marks":[{"type":"bold"}],"text":"именованные слоты"},{"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":"В дочернем компоненте вы объявляете несколько "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" с атрибутом "},{"type":"text","marks":[{"type":"bold"}],"text":"name"},{"type":"text","text":":"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Дочерний компонент (Card.vue)"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"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":"vue"},"content":[{"type":"text","text":"\n \n\n

Основной текст карточки

\n\n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Итоговый результат:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в "},{"type":"text","marks":[{"type":"code"}],"text":"header"},{"type":"text","text":" попадает "},{"type":"text","marks":[{"type":"code"}],"text":"

Заголовок

"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в default слот — "},{"type":"text","marks":[{"type":"code"}],"text":"

Основной текст...

"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в "},{"type":"text","marks":[{"type":"code"}],"text":"footer"},{"type":"text","text":" — кнопка"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"✔ Да, можно иметь сколько угодно слотов"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2 слота"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"5 слотов"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"10 слотов"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue не ограничивает количество, главное — чтобы:"}]},{"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":"text","marks":[{"type":"code"}],"text":"#slotName"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Можно ли использовать несколько слотов в одном компоненте?

Комментарии