하위 구성요소에 슬롯이 사용되는 이유는 무엇입니까?

이번에는 하위 컴포넌트에서 슬롯을 사용하는 이유와 슬롯 하위 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

슬롯 시나리오 1 사용:

Sub 구성 요소 Minput.vue

<input type=&#39;text&#39;/>

상위 구성 요소 Minput

<Minput>可以显示吗</Minput>

이 경우 Minput 태그의 텍스트는 렌더링되지 않습니다

지금 내부의 텍스트를 렌더링하려면 어떻게 해야 합니까? 슬롯을 사용하기 쉽습니다

하위 컴포넌트

<input type=&#39;text&#39;/>

이 경우 상위 컴포넌트 내부의 텍스트를 렌더링할 수 있습니다

시나리오 2: 명명된 슬롯

하위 컴포넌트 he.vue

<header>
    <slot name=&#39;header&#39;></slot>
</header>

상위 컴포넌트

<he>
    <h1 name=&#39;header&#39;>hello world</h1>
</he>

렌더링 결과는

<header><h1>hello world</h1></header>

시나리오 3

하위 구성 요소 child

<div>
    <h1>这是h1</h1>
    <slot>这是分发内容,只有在没有分发内容的情况下显示</slot>
</div>

상위 구성 요소

<child>
    <p>这是一段p</p>
    <p>两段p</p>
</child>

렌더링은

<div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>

상위 구성 요소

<child></child>

인 경우 렌더링된 결과는

<div><h1>这是h1</h1>这是分发内容，只有在没有分发内容的情况下显示</div>

4장면: 범위 슬롯

<div class="child">
  <slot text="hello from child"></slot>
</div>

Parent입니다. component

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

x 렌더링은

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

버튼을 클릭한 후 "점" 테두리를 표시하는 방법

브라우저 렌더링 프로세스에 대한 자세한 설명

입력 텍스트 상자 및 img 확인 코드를 만드는 방법

일반적으로 사용되는 입력 텍스트 상자의 내용은 자동으로 세로 중앙에 배치되며 클릭 시 기본 프롬프트 텍스트는 비어 있습니다

위 내용은 하위 구성요소에 슬롯이 사용되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!