최신 웹 애플리케이션 개발의 핵심은 구성 요소입니다. 각 응용 프로그램은 전체를 형성하기 위해 함께 작동하는 여러 구성 요소로 구성됩니다. 다른 시나리오와 다른 응용 분야에서도 재사용하려면 이러한 구성 요소는 가장 유연성과 재사용을 가져야합니다. 많은 프레임 워크 (특히 VUE)는 이러한 요구를 충족시키기 위해 "슬롯"이라는 메커니즘을 사용합니다.
를 만듭니다
이제, 우리는 매일 문장을 표시하는 구성 요소를 구축 할 것입니다. 코드는 다음과 같습니다.
<p>
</p>
<p>
이 예에서는 컨텐츠가 동일하게 유지되는 제목을 만듭니다. 그런 다음 슬롯 구성 요소를 단락에 넣습니다. 구성 요소를 렌더링 할 때 VUE는 견적 구성 요소에서 제목을 표시 한 다음 견적 태그에 넣는 내용을 표시합니다. 또한 견적 생성 및 구현에 사용 된 CSS 클래스에주의하십시오. 필요에 따라 구성 요소를 두 가지 방식으로 스타일링 할 수 있습니다. </p>
여러 슬롯 사용 <ots>
<sl> 단일 슬롯은 매우 강력하지만 많은 경우에는 충분하지 않습니다. 실제 시나리오에서는 일반적으로 작업을 완료하려면 여러 슬롯이 필요합니다. 다행히도 Vue는 우리가 원하는만큼 많은 슬롯을 사용할 수있게 해줍니다. 간단한 카드 구성 요소를 구축하여 여러 슬롯을 사용하는 방법을 살펴 보겠습니다. <p>
<strong> 기본 카드 구성 요소를 빌드 </strong> </p>
<a a> 우리는 세 부분으로 카드 구성 요소를 만들 것입니다 : 제목, 바디 및 바닥 글 :
<p>
</p>
<use> 여러 슬롯을 사용하려면 각 슬롯의 이름을 제공해야합니다. 유일한 예외는 기본 슬롯입니다. 따라서 위의 예에서는 헤더 및 바닥 글 슬롯에 이름 속성을 추가합니다. 이름을 제공하지 않는 슬롯은 기본 슬롯으로 간주됩니다. <pre class="brush:php;toolbar:false"><code class="language-javascript">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')</code></pre>
<the> 카드 구성 요소를 사용할 때는 v-slot 지시문 및 슬롯 이름과 함께 템플릿 요소를 사용해야합니다. v-slot : [slot-name]. <pre class="brush:php;toolbar:false"><code class="language-html"><div id="app">
<quote>
<div class="quote-box">
<span class="quote-text">"Creativity is just connecting things."</span>
<br>
- Steve Jobs
</div>
</quote>
</div></code></pre>
<pre class="brush:php;toolbar:false"><code class="language-css">.quote-box {
background-color: lightgreen;
width: 300px;
padding: 5px 10px;
}
.quote-text {
font-style: italic;
}</code></pre> (길이가 너무 길기 때문에 나머지 부분은 여기에서 생략됩니다. 필요에 따라 일부 컨텐츠를 선택하거나 삭제하십시오.)</the></use></a></sl></ots>
위 내용은 VUE 슬롯에 대한 포괄적 인 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
