Vue 내용 배포 slot(전면 해석)

앞 말
구성 요 소 를 조합 할 수 있 도록 부모 구성 요소 의 내용 과 하위 구성 요소 의 템 플 릿 을 혼합 하 는 방법 이 필요 합 니 다.이 과정 은 내용 배포(또는'transclusion')라 고 불 린 다.Vue 는 하나의 콘 텐 츠 배포 API 를 실현 하고 현재 웹 구성 요소 규범 초안 을 참조 하 며 특수 한요 소 를 원본 콘 텐 츠 의 슬롯 으로 사용 합 니 다.본 고 는 Vue 내용 배포 slot 를 상세 하 게 소개 할 것 이다.
컴 파일 역할 영역
내용 을 깊이 파고 들 어 API 를 나 누 어 주기 전에 내용 이 어느 역할 영역 에서 컴 파일 되 는 지 명 확 히 한다.템 플 릿


<child-component>
 {{ message }}
</child-component>

message 는 부모 구성 요소 의 데이터 에 연결 해 야 합 니까?아니면 하위 구성 요소 의 데이터 에 연결 해 야 합 니까?정 답 은 부모 구성 요소 입 니 다.구성 요소 역할 영역 은 쉽게 말 하면 부모 구성 요소 템 플 릿 의 내용 은 부모 구성 요소 역할 영역 에서 컴 파일 됩 니 다.하위 구성 요소 템 플 릿 의 내용 은 하위 구성 요소 역할 영역 에서 컴 파일 됩 니 다.
일반적인 오 류 는 부모 구성 요소 템 플 릿 에서 하위 구성 요소 에 명령 을 연결 하려 는 속성/방법 입 니 다.


<!--    -->
<child-component v-show="someChildProperty"></child-component>

some Child Property 가 하위 구성 요소 의 속성 이 라 고 가정 하면 예상 한 대로 작 동 하지 않 습 니 다.부모 구성 요소 템 플 릿 은 하위 구성 요소 의 상 태 를 알 아 서 는 안 됩 니 다.
역할 영역 내 명령 을 구성 요소 의 루트 노드 에 연결 하려 면 구성 요소 자체 템 플 릿 에서 해 야 합 니 다.


Vue.component('child-component', {
 //   ，           
 template: '<div v-show="someChildProperty">Child</div>',
 data: function () {
 return {
  someChildProperty: true
 }
 }
})

유사 하 게 배포 내용 은 부모 역할 영역 에서 컴 파일 된 것 이다.
묵인 폐기
일반적으로 하위 구성 요소 템 플 릿 에플러그 인 이 포함 되 어 있 지 않 으 면 부모 구성 요소 의 내용 이 버 려 집 니 다.


var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p>    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};


<div id="example">
 <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p>    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
//      
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

아래 그림 에서 보 듯 이에 포 함 된

테스트 내용

이 버 려 집 니 다.

익명 슬롯
하위 구성 요소 템 플 릿 에 속성 이 없 는 slot 만 있 을 때 부모 구성 요소 의 전체 내용 세 션 은 slot 가 있 는 DOM 위치 에 삽입 되 고 slot 태그 자 체 를 교체 합 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p>    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

1 개 이상 의 익명 슬롯 이 나타 나 면 vue 가 잘못 보고 합 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot></slot>
 <slot></slot>
 </div>
 `,
};

[기본 값]
처음에<slot>탭 에 있 는 모든 내용 을 예비 내용 으로 간주 하거나 기본 값 이 라 고 합 니 다.예비 내용 은 하위 구성 요소 의 역할 영역 에서 컴 파일 되 며 숙주 요소 가 비어 있 고 삽입 할 내용 이 없 을 때 만 예비 내용 을 표시 합 니 다.
slot 에 기본 값 이 존재 하고 부모 요소 가에 삽입 할 내용 이 없 을 때 기본 값 을 표시 합 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot><p>     </p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child></child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

slot 에 기본 값 이 존재 하고 부모 요소 가에 삽입 할 내용 이 존재 할 때 설정 값 을 표시 합 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot><p>     </p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p>     </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

서명 슬롯<slot>요 소 는 특수 한 속성name으로 내용 을 어떻게 나 누 는 지 설정 할 수 있 습 니 다.여러 개의 slot 는 다른 이름 을 가 질 수 있다.서명 slot 는 내용 세 션 에 대응 하 는slot특성 을 가 진 요 소 를 일치 시 킵 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot name="my-header">     </slot>
 <slot name="my-body">     </slot>
 <slot name="my-footer">     </slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p slot="my-header">    </p>
  <p slot="my-footer">    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

여전히 익명 의 slot 가 있 습 니 다.기본 slot 입 니 다.일치 하 는 콘 텐 츠 세 션 을 찾 을 수 없 는 예비 슬롯 입 니 다.익명 slot 는 slot 속성 이 없 는 요소 의 슬롯 으로 만 사용 할 수 있 습 니 다.slot 속성 이 있 는 요소 가 slot 를 설정 하지 않 으 면 버 려 집 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot name="my-body">     </slot>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p slot="my-body">    </p>
  <p>      </p>
  <p slot="my-footer">    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

삽입에,

나 는 다른 내용

삽입에,

는 버 려 집 니 다.

기본 slot 가 없 으 면 일치 하 는 내용 을 찾 지 못 하 는 세 션 도 버 려 집 니 다.


var childNode = {
 template: `
 <div class="child">
 <p>   </p>
 <slot name="my-body">     </slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>   </p>
 <child>
  <p slot="my-body">    </p>
  <p>      </p>
  <p slot="my-footer">    </p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

저 는 다른 내용 입 니 다

와

모두 버 림 받 았 습 니 다.

역할 영역 슬롯
역할 도 메 인 슬롯 은 특수 한 유형의 슬롯 으로 하나의(데 이 터 를 전달 할 수 있 음)템 플 릿 을 사용 하여 렌 더 링 요 소 를 다시 사용 할 수 있 습 니 다.
하위 구성 요소 에 서 는 props 를 구성 요소 에 전달 하 는 것 처럼 데 이 터 를 슬롯 에 전달 하기 만 하면 됩 니 다.

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

부모 급 에 서 는 특수 속성 scope 를 가 진

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Svelte3의 슬롯 ด้วย $$ 슬롯

เมื่อ เมื่อ เมื่อ มา อ่าน บท นี้ นี้ ก็ คง คง จะ พอรู้ พอรู้ และ ใช้ ใช้ งาน งาน 슬롯 มา พอ สมควร สมควร แล้ว นี้ นี้ เรา ม...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue 내용 배포 slot(전면 해석)

좋은 웹페이지 즐겨찾기