Как из слота передаются переменные?

Слоты в компонентах: передача переменных

Вопрос о слотах чаще всего относится к Vue.js или к концепции web components. Слоты (slots) — это механизм для передачи контента и данных из родительского компонента в дочерний. Они позволяют создавать гибкие, переиспользуемые компоненты. Рассмотрю оба подхода.

Слоты в Vue.js

В Vue слоты — это именованные отверстия в шаблоне компонента, куда можно передавать контент. Переменные передаются через scoped slots (слоты с областью видимости).

Именованные слоты Позволяют передавать разный контент в разные части компонента.

Scoped slots Позволяют дочернему компоненту передавать данные обратно в родителя через слот.

Примеры в Vue.js

// КОМПОНЕНТ: UserCard.vue (дочерний компонент)
template
  div class="card"
    // Именованный слот header
    slot name="header"
      h2 Заголовок по умолчанию
    
    // Scoped slot: дочерний компонент передаёт данные
    slot name="content" :user="currentUser" :isActive="isActive"
      p Содержимое по умолчанию
    
    // Обычный слот
    slot
      p Это содержимое по умолчанию

script setup
import { ref } from 'vue';

const currentUser = ref({ name: 'John', id: 1 });
const isActive = ref(true);

Слоты в React (через composition)

В React не используется концепция слотов как в Vue, но достигается аналогичный результат через composition и props:

// КОМПОНЕНТ: UserCard.jsx (дочерний компонент)
function UserCard({ header, children, footer }) {
  const user = { name: 'John', id: 1 };
  
  return (
    div className="card"
      div className="card-header"
        {header || h2 Заголовок по умолчанию}
      /div
      
      div className="card-content"
        {typeof children === 'function' 
          ? children(user) 
          : children}
      /div
      
      div className="card-footer"
        {footer || p Подвал по умолчанию}
      /div
    /div
  );
}

// ИСПОЛЬЗОВАНИЕ
UserCard 
  header={h2 Пользователь}
  footer={p Конец карточки}
  {(user) => (
    div
      p Имя: {user.name}
      p ID: {user.id}
    /div
  )}
/UserCard

Render props в React

Техника render props — это альтернатива для передачи данных из компонента в слот:

function UserProvider({ children }) {
  const [user, setUser] = React.useState({ name: 'John', id: 1 });
  const [isActive, setIsActive] = React.useState(true);
  
  return children({ user, isActive });
}

UserProvider
  {({ user, isActive }) => (
    div
      p Имя: {user.name}
      p Пользователь активен
    /div
  )}
/UserProvider

Web Components слоты

В Web Components слоты работают через Shadow DOM:

class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    const userData = { name: 'John', id: 1 };
    
    this.shadowRoot.innerHTML = `
      style
        :host { display: block; padding: 20px; }
        .card { border: 1px solid #ccc; }
      /style
      
      div class="card"
        slot name="header"
          h2 Заголовок по умолчанию
        /slot
        
        slot
          p Содержимое по умолчанию
        /slot
      /div
    `;
    
    this.exposedData = userData;
  }
}

customElements.define('user-card', UserCard);

Context API в React

Современный способ передачи данных глубоко вложенным компонентам:

const UserContext = React.createContext();

function UserProvider({ children }) {
  const [user, setUser] = React.useState({ name: 'John', id: 1 });
  
  return (
    UserContext.Provider value={{ user, setUser }}
      {children}
    /UserContext.Provider
  );
}

function UserCard({ children }) {
  const { user } = React.useContext(UserContext);
  
  return (
    div className="card"
      {typeof children === 'function' 
        ? children(user) 
        : children}
    /div
  );
}

Заключение

Передача переменных из слотов происходит по-разному в зависимости от фреймворка: Vue.js использует scoped slots, React использует render props или Context API, Web Components работают через методы компонента. Ключевая идея — дочерний компонент предоставляет данные, а родительский компонент решает, как их использовать.