VUE 슬롯에 대한 포괄적 인 안내서

최신 웹 애플리케이션 개발의 핵심은 구성 요소입니다. 각 응용 프로그램은 전체를 형성하기 위해 함께 작동하는 여러 구성 요소로 구성됩니다. 다른 시나리오와 다른 응용 분야에서도 재사용하려면 이러한 구성 요소는 가장 유연성과 재사용을 가져야합니다. 많은 프레임 워크 (특히 VUE)는 이러한 요구를 충족시키기 위해 "슬롯"이라는 메커니즘을 사용합니다.

슬롯은 강력하고 다재다능한 컨텐츠 분포 및 조합 메커니즘입니다. 슬롯을 다른 위치와 다양한 사용 사례에서 사용할 수있는 사용자 정의 가능한 템플릿 (PHP 템플릿과 유사)으로 생각할 수 있습니다. 예를 들어, vuetify와 같은 UI 프레임 워크에서 슬롯은 경고 구성 요소와 같은 공통 구성 요소를 만드는 데 사용됩니다. 이 구성 요소에서 슬롯은 기본 콘텐츠 및 추가/선택적 컨텐츠 (예 : 아이콘, 이미지 등)의 자리 표시 자 역할을합니다.

슬롯을 사용하면 특정 구성 요소에 구조, 스타일 및 기능을 추가 할 수 있습니다. 슬롯을 사용하면 개발자는 단일 구성 요소에 사용되는 소품 수를 크게 줄여서 구성 요소가 더 간단하고 관리하기 쉽습니다.

이 튜토리얼은 VUE 3에서 슬롯을 활용하는 방법을 살펴 봅니다. 시작합시다.

키 포인트

vue 슬롯은 구성 요소 유연성을 향상시킵니다. vue.js의 슬롯은 구성 요소 내의 컨텐츠를 동적으로 배치 할 수 있도록하여 재사용 가능하고 다른 컨텍스트에 적응할 수 있습니다.

기본 슬롯 및 스코프 슬롯 : Vue는 두 가지 유형의 슬롯, 즉 기본 슬롯과 스코프 슬롯을 제공합니다. 기본 슬롯은 간단한 컨텐츠 교체에 사용되며 스코프 슬롯을 사용하면 하위 구성 요소 데이터에 액세스 할 수 있으므로보다 복잡하고 대화 형 컨텐츠 통합이 가능합니다.

여러 슬롯과 이름이 지정된 슬롯은 구조적 복잡성을 추가합니다. 여러 컨텐츠 영역이 필요한 구성 요소의 경우 VUE는 컨텐츠를보다 효과적으로 구성하고 기능 유지 보수를 개선하는 데 도움이되는 이름의 슬롯을 포함한 여러 슬롯을 지원합니다.

슬롯 대 소품 : 소품은 데이터를 구성 요소로 전달하는 데 중요하지만 슬롯은 복잡한 컨텐츠 구조를 관리하고 컨텐츠 분포를위한 소품의 종속성을 줄이는 데보다 유연한 솔루션을 제공합니다. 슬롯의 실제 적용 : VUE 슬롯은 정적 컨텐츠에만 국한되지 않지만 완전한 템플릿 또는 대화식 기능을 제공하는 데 사용될 수 있으므로 구성 요소의 기능 및 상호 작용을 향상시킬 수 있습니다. 최상의 구성 요소 설계를 위해 소품과 함께 슬롯 사용 : 모범 사례는 컨텐츠 관리에 슬롯을 사용하고 구성 요소 내 데이터 처리를위한 소품을 사용하여 구성 요소를보다 효율적이고 명확하게 만들 수 있습니다.

• 기본 슬롯 사용 vue는 주로 두 개의 슬롯을 제공합니다 : 간단한 슬롯 및 스코프 슬롯. 간단한 슬롯부터 시작하겠습니다. 다음 예를 고려하십시오 :

  const app = Vue.createApp({})
  
  app.component('primary-button', {
    template: `
      <button>
        <slot>OK</slot>
      </button>
    `
  })
  
  app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

  여기에는 기본 버튼 구성 요소가 있습니다. 버튼 텍스트를 사용자 정의 할 수 있으므로 버튼 요소 내부의 슬롯 구성 요소를 사용하여 텍스트 자리 표시기를 추가합니다. 사용자 정의 값을 제공하지 않으면 기본 (폴백) 공통 값도 원합니다. Vue는 슬롯 구성 요소 내부에있는 모든 것을 기본 슬롯 컨텐츠로 사용합니다. 따라서 우리는 구성 요소 안에 텍스트 "확인"을 배치해야합니다. 이제 다음과 같은 구성 요소를 사용할 수 있습니다

  결과는 값을 제공하지 않기 때문에 텍스트 "OK"가있는 버튼입니다. 그러나 사용자 정의 텍스트로 버튼을 만들려면 어떻게해야합니까? 이 경우 다음과 같이 구성 요소 구현에서 사용자 정의 텍스트를 제공합니다.

  여기에서 Vue는 사용자 정의 텍스트를 "구독"하여 기본 텍스트 대신 사용합니다.

  <div id="app">
    <primary-button></primary-button>
  </div>

  보시다시피,이 간단한 예에서도 구성 요소 렌더링 방법에 많은 유연성을 얻을 수 있습니다. 그러나 이것은 빙산의 일각 일뿐입니다. 더 복잡한 예를 살펴 보겠습니다.

  <🎜 🎜> <<> "오늘의 문장"구성 요소

  <div id="app">
    <primary-button>Subscribe</primary-button>
  </div>

  를 만듭니다 이제, 우리는 매일 문장을 표시하는 구성 요소를 구축 할 것입니다. 코드는 다음과 같습니다.

  <,>이 예에서는 컨텐츠가 동일하게 유지되는 제목을 만듭니다. 그런 다음 슬롯 구성 요소를 단락에 넣습니다. 구성 요소를 렌더링 할 때 VUE는 견적 구성 요소에서 제목을 표시 한 다음 견적 태그에 넣는 내용을 표시합니다. 또한 견적 생성 및 구현에 사용 된 CSS 클래스에주의하십시오. 필요에 따라 구성 요소를 두 가지 방식으로 스타일링 할 수 있습니다.

  여러 슬롯 사용 단일 슬롯은 매우 강력하지만 많은 경우에는 충분하지 않습니다. 실제 시나리오에서는 일반적으로 작업을 완료하려면 여러 슬롯이 필요합니다. 다행히도 Vue는 우리가 원하는만큼 많은 슬롯을 사용할 수있게 해줍니다. 간단한 카드 구성 요소를 구축하여 여러 슬롯을 사용하는 방법을 살펴 보겠습니다.

  <<> 기본 카드 구성 요소를 빌드

  우리는 세 부분으로 카드 구성 요소를 만들 것입니다 : 제목, 바디 및 바닥 글 : <🎜 🎜>
  여러 슬롯을 사용하려면 각 슬롯의 이름을 제공해야합니다. 유일한 예외는 기본 슬롯입니다. 따라서 위의 예에서는 헤더 및 바닥 글 슬롯에 이름 속성을 추가합니다. 이름을 제공하지 않는 슬롯은 기본 슬롯으로 간주됩니다.

  const app = Vue.createApp({})
  
  app.component('quote', {
    template: `
      <div>
        <h2>The quote of the day says:</h2>
        <p>
          <slot></slot>
        </p>
      </div>
    `
  })
  
  app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

  카드 구성 요소를 사용할 때는 v-slot 지시문 및 슬롯 이름과 함께 템플릿 요소를 사용해야합니다. v-slot : [slot-name].

  <div id="app">
    <quote>
      <div class="quote-box">
        <span class="quote-text">"Creativity is just connecting things."</span>
        <br>
        - Steve Jobs
      </div>
    </quote>
  </div>

  .quote-box {
    background-color: lightgreen;
    width: 300px;
    padding: 5px 10px;
  }
  
  .quote-text {
    font-style: italic;
  }

  (길이가 너무 길기 때문에 나머지 부분은 여기에서 생략됩니다. 필요에 따라 일부 컨텐츠를 선택하거나 삭제하십시오.)

위 내용은 VUE 슬롯에 대한 포괄적 인 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!