구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서 구성 요소는 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
슬롯 분배 컨텐츠
① 개요 :
간단히 말해서, 부모 구성 요소가 자식 구성 요소에 일부 DOM을 넣어야하는 경우,이 DOM은 표시되지 않고 표시되지 않으며 표시되는 위치 및 표시 방법, 이는 슬롯 분포의 책임입니다.
② 기본적으로
자식 구성 요소 내부에 밀폐 된 상위 구성 요소의 내용은 표시되지 않습니다.
예를 들어 코드 :
<div id = "app"> <chiust> <span> 12345 </span> <!-위의 줄은 표시되지 않습니다-> </children> </div> <cript> var vm = new vue ({el : '#app', 구성 요소 : {children : {// 템플릿은 계속 배포되지 않습니다. }}); </스크립트>디스플레이 컨텐츠는 버튼 버튼으로 스팬 태그에 내용이 포함되어 있지 않습니다.
싱글 슬롯
간단히 말해서이 태그 만 사용하는 경우 부모 구성 요소를 자식 구성 요소의 내용에 배치하고 표시하려는 배치 할 수 있습니다.
<div id = "app"> <chiust> <chils> 12345 </span> <!-위의 줄은 표시되지 않습니다-> </children> </div> <cript> var vm = new vue ({el : '#app', 구성 요소 : {// 템플릿은 계속 배포되지 않습니다. 버튼 태그 </button> "}}); </스크립트>예를 들어,이 글을 쓰면 결과는 다음과 같습니다.
<버튼> <span> 12345 </span> 작업 범위를 명확히하려면 버튼 태그 </button>을 사용하십시오.
즉, 아동 구성 요소에 배치 된 부모 구성 요소의 내용은 자식 구성 요소의 <lot> </slot> 위치에 삽입됩니다.
태그가 여러 개 있더라도 함께 삽입되며 <Slot> </slot> 태그를 자식 구성 요소에 배치 한 태그로 대체하는 것과 같습니다.
slot이라는 이름이 지정되었습니다
다른 HTML 태그를 다른 위치의 하위 구성 요소에 배치하십시오.
부모 구성 요소는 분포 될 태그에 슬롯 =”이름”속성을 추가합니다.
자식 구성 요소는 해당 분포 위치의 슬롯 태그에 이름 = "이름 이름"속성을 추가 한 다음 해당 태그를 해당 위치에 넣습니다.
샘플 코드 :
<div id="app"> <children> <span slot="first">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<버튼> <슬롯 이름 = 'first'> </slot> 액션 범위를 명확히하기 위해 <슬롯 이름 = 'second'> </slot> 따라서 버튼 태그 </button>"}})를 사용하십시오. </스크립트>결과는 다음과 같이 표시됩니다.
<button> <span slot = "first"> 12345 </span> 동작 범위를 명확히하려면 <span slot = "second"> 56789 </span> 버튼 태그 </button>을 사용하십시오.
분포 콘텐츠의 스코프 :
분산 컨텐츠의 범위는 위치가있는 템플릿을 기반으로 결정됩니다. 예를 들어, 위의 태그는 부모 구성 요소의 템플릿에 의해 제어됩니다 (자식 구성 요소의 자식 태그에 포함되지만 자식 구성 요소의 템플릿 속성에 있지 않기 때문에 자식 구성 요소에 속하지 않음).
샘플 코드 :
<div id = "app"> <chils> <span slot = "first" @click = "tobeknow"> 12345 </span> <span slot = "secon"> 56789 </span> <!-위의 줄은 표시되지 않습니다-> </div> <cript> var vm = new vue ({el : '#app', tobeknow : function : a wects ', Console.log ( "부모의 방법입니다")}}} {children : {// 템플릿은 계속 분배되지 않습니다. </스크립트>텍스트 12345의 영역이 클릭되면 (모두 버튼이 아닌) 부모 구성 요소의 TobekNow 메소드가 트리거됩니다.
그러나 다른 영역을 클릭하면 효과가 없습니다.
공식 튜토리얼은 다음과 같이 말합니다.
부모 구성 요소 템플릿의 내용은 부모 구성 요소의 범위 내에서 컴파일됩니다. 자식 구성 요소 템플릿의 내용은 자식 구성 요소의 범위 내에서 컴파일됩니다.
content 컨텐츠 배포가없는 경우 팁 :
부모 구성 요소가 자식 구성 요소에 태그를 배치하지 않거나 부모 구성 요소가 자식 구성 요소에 태그를 배치하지만 슬롯 속성이 있고 하위 구성 요소에는 슬롯 속성에 대한 태그가 없습니다.
그러면 자식 구성 요소의 슬롯 태그가 역할을하지 않습니다.
슬롯 태그에 내용이없는 한, 컨텐츠 배포가 없으면 슬롯 태그의 내용이 표시됩니다.
예제 코드에서와 같이 :
<div id = "app"> <childs> <span slot = "First"> 【12345】 </span> <!-위의 줄은 표시되지 않습니다-> </children> </div> <cript> var vm = new vu ({el : '#app', 구성 요소 : {// 템플릿은 계속 배포되지 않습니다. 이름 = 'First'> <butty> 【컨텐츠가 없으면 1】】 </button> </slot> 동작 범위를 명확히하기 위해 <slot name = 'last'> <butty> 내용이 없으면 2】】 </button> </slot>를 표시합니다. </스크립트>설명 :
name = 'First'인 슬롯 태그는 부모 구성 요소에 해당하는 태그로 대체됩니다 (슬롯 태그 내부의 내용은 폐기 됨).
【2 sl 이름의 슬롯 태그 = 'last', 해당 콘텐츠가 없기 때문에 슬롯 태그 내부의 내용이 표시됩니다.
subcomponent의 루트 태그의 속성을 제어하려면
[1] 우선, 템플릿 태그는 부모 구성 요소에 속하므로 템플릿 태그에 자식 구성 요소의 지침을 바인딩 할 수 없습니다 (부모 구성 요소에 속하기 때문에).
[2] 부모 구성 요소를 통해 하위 구성 요소가 표시되는지 (예 : V-IF 또는 V-Show)를 제어 해야하는 경우이 지침은 분명히 상위 구성 요소 (예 : 부모 구성 요소의 데이터 아래에 배치 된)에 속합니다. 태그는 자식 구성 요소의 템플릿에 쓸 수 있습니다.
코드로 :
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 </div-if = "abc"> </children> </div> <cript> var vm = new vue ({el : '#app', data : {abc : false}, methods : {toshow : {abc =},} children : {// 이것은 반환 값이 없습니다. 템플릿 : "<div> 이것은 아동 구성 요소 </div>"}}); </스크립트>설명 :
자식 구성 요소가 상위 구성 요소를 통해 표시되는지 여부를 제어합니다 (버튼을 클릭하여 V-IF 명령 값을 전환하십시오).
[3] 아동 구성 요소가 표시되는지 여부 (예 : 숨기면)를 제어 해야하는 경우이 명령어는 분명히 아동 구성 요소에 속합니다 (값은 자식 구성 요소의 데이터 속성 아래에 배치 될 것입니다). 위와 같이 쓸 수는 없지만 자식 구성 요소의 루트 레이블에 배치해야합니다.
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button> <chiust> <children> <span slot = "First"> 【12345】 </span> <!-위의 줄은 표시되지 않습니다-> </div> <cript> var vm = new vue ({el : '#app', methods : ^ toshow : ^ toshow : 이. $ children [0] .toHidden = true}}, 구성 요소 : {children : {// 템플릿은 계속 배포되지 않습니다. this.toHidden =! this.ToHidden;}}}}); </스크립트>설명 :
자식 구성 요소를 클릭하면 자식 구성 요소가 사라집니다.
부모 구성 요소의 버튼을 클릭하여 자식 구성 요소의 토목 특성을 변경하여 자식 구성 요소를 REDISPLAY로 표시하십시오.
아동 구성 요소의 지침은 자식 구성 요소의 템플릿에 바인딩됩니다 (이는 호출 될 수 있음).
위는 편집기가 소개 한 11 번째 Vuejs 구성 요소의 슬롯 컨텐츠 분포 예에 대한 자세한 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!