Vue.js
슬롯
수색…
비고
중대한! 렌더링 후 슬롯은 슬롯의 위치 순서를 보장하지 않습니다. 첫 번째 슬롯이었던 슬롯은 렌더링 후에 다른 위치를 가질 수 있습니다.
단일 슬롯 사용
자식 구성 요소가 템플릿 내에서 하나의 slot 만 정의 할 때 단일 슬롯이 사용됩니다. 위의 page 구성 요소는 단일 슬롯을 사용하여 콘텐츠를 배포합니다.
단일 슬롯을 사용하는 page 구성 요소의 템플릿 예제는 다음과 같습니다.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</body>
</html>
슬롯이 어떻게 작동하는지 설명하기 위해 다음과 같이 페이지를 설정할 수 있습니다.
<page>
<p>This content will be displayed within the page component</p>
</page>
최종 결과는 다음과 같습니다.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
<page></page> 대신에 page 태그 사이에 아무것도 넣지 않으면 page 구성 요소 템플릿의 slot 태그 사이에 기본 내용이 있으므로 다음과 같은 결과가 나타납니다.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
슬롯이란 무엇입니까?
슬롯은 부모 구성 요소에서 하위 구성 요소로 콘텐츠를 배포하는 편리한 방법을 제공합니다. 이 콘텐츠는 텍스트, HTML 또는 기타 구성 요소의 내용 일 수 있습니다.
슬롯을 자식 구성 요소의 템플릿에 직접 삽입하는 수단으로 생각하는 것이 도움이 될 수 있습니다.
슬롯은 상위 구성 요소 아래의 구성 요소 구성이 항상 같지 않을 때 특히 유용합니다.
page 구성 요소가있는 다음 예제를 살펴보십시오. 페이지의 내용은 기사, 블로그 게시물 또는 양식과 같은 페이지가 표시되는지 여부에 따라 변경 될 수 있습니다.
조
<page>
<article></article>
<comments></comments>
</page>
블로그 게시물
<page>
<blog-post></blog-post>
<comments></comments>
</page>
형태
<page>
<form></form>
</page>
page 구성 요소의 내용이 어떻게 바뀔 수 있는지 확인하십시오. 슬롯을 사용하지 않으면 템플리트의 내부 부분이 고정되므로 더 어려워집니다.
기억 : "부모 템플릿의 모든 것은 부모 범위에 컴파일, 아이 템플릿의 모든 것이 아이의 범위에 컴파일됩니다."
명명 된 슬롯 사용
명명 된 슬롯은 단일 슬롯과 유사하게 작동하지만 대신 하위 구성 요소 템플릿 내의 다른 영역에 콘텐츠를 배포 할 수 있습니다.
앞의 예제에서 page 구성 요소를 가져 와서 템플릿을 다음과 같이 수정하십시오.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
page 구성 요소를 사용할 때 이제 slot 속성을 통해 콘텐츠가 배치되는 위치를 결정할 수 있습니다.
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
결과 페이지는 다음과 같습니다.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
경우 slot 없이 정의 된 name 다음 속성 지정하지 않는 구성 요소 태그 내에 배치되는 모든 컨텐츠 slot 속성을 해당 슬롯에 배치됩니다.
Vue.js 공식 문서의 다중 삽입 예제를 참조하십시오.
'babel-plugin-transform-vue-jsx'와 함께 Vue JSX에서 슬롯 사용
VueJS2를 사용하고 있고 JSX를 사용하고 싶다면. 이 경우, 상기 슬롯을 사용하는 예에 용액 below.We 사용할 필요하다 this.$slots.default 거의 같아 this.props.children JS 반응한다.
Component.js :
export default {
render(h) { //eslint-disable-line
return (
<li>
{ this.$slots.default }
</li>
);
}
};
ParentComponent.js
import Component from './Component';
export default {
render(h) { //eslint-disable-line
return (
<ul>
<Component>
Hello World
</Component>
</ul>
);
}
};