<template> <div> <slot></slot> </div> </template>
<slot></slot>
태그에 전달되고 순차적으로 렌더링을 누릅니다. . <slot></slot>
标签中,并按顺序渲染出来。<my-component> <p>Hello, world!</p> </my-component>
<my-component>
标签内部添加了一个 <p>
标签,这个 <p>
标签将被传递到组件内部的 <slot></slot>
标签中,并渲染出来。<template> <div> <slot name="header"></slot> <div> <slot></slot> </div> <slot name="footer"></slot> </div> </template>
name="header"
和 name="footer"
为命名插槽,而无 name
属性的 <slot></slot>
标签为默认插槽。当我们在使用这个组件时,可以使用 v-slot
指令来指定某个插槽的内容,并向这个插槽传递 HTML 结构。<my-component> <template v-slot:header> <h1>This is the header</h1> </template> <p>Hello, world!</p> <template v-slot:footer> <footer>Footer</footer> </template> </my-component>
v-slot
指令指定了三个插槽的内容,可以看到,使用命名插槽可以大大提升组件的可读性和可维护性。<template> <div> <slot name="header"></slot> <div> <slot></slot> </div> <slot name="footer"></slot> </div> </template> <my-component>This is the header
<p>Hello, world!
#
来代替 v-slot:
,将 v-slot:name
简写成 #name
rrreee위 코드는 <my-comComponent>
태그 안에 <p>
태그를 추가합니다. 태그는 구성 요소 내부의 <slot></slot>
태그로 전달되어 렌더링됩니다. 명명된 슬롯<p>구성 요소에서 여러 슬롯을 사용할 때 모두 기본 슬롯을 사용하면 이러한 슬롯이 순서대로 렌더링되어 코드가 혼란스러울 수 있습니다. 이를 방지하기 위해 명명된 슬롯을 사용할 수 있습니다. 🎜🎜이름이 지정된 슬롯과 기본 슬롯의 차이점은 이름이 지정된 슬롯을 사용할 때 슬롯에 이름을 지정하고 HTML 구조를 전달할 때 이 이름을 지정해야 한다는 것입니다. 다음은 명명된 슬롯을 사용하는 구성 요소의 예입니다. 🎜rrreee🎜위 코드는 세 개의 슬롯을 정의합니다. 여기서 name="header"
및 name="footer"
는 명명된 슬롯입니다. 슬롯이며, name
속성이 없는 <slot></slot>
태그가 기본 슬롯입니다. 이 구성요소를 사용할 때 v-slot
지시어를 사용하여 슬롯의 콘텐츠를 지정하고 HTML 구조를 이 슬롯에 전달할 수 있습니다. 🎜rrreee🎜위 코드는 v-slot
지시문을 사용하여 세 개의 슬롯의 내용을 지정합니다. 보시다시피 명명된 슬롯을 사용하면 구성 요소의 가독성과 유지 관리성이 크게 향상될 수 있습니다. 🎜🎜약식 구문🎜🎜코드를 더욱 단순화하기 위해 Vue 2.6.0에서는 단축 구문을 도입했습니다. 🎜rrreee🎜보시다시피 v-slot 대신 <code>#
를 사용할 수 있습니다. :, v-slot:name
을 #name
으로 줄여 코드를 작성하기가 더 쉽습니다. 🎜🎜요약🎜🎜기본 슬롯을 사용하면 구성 요소의 HTML 구조를 전달할 수 있고, 명명된 슬롯을 사용하면 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있으며, 축약된 구문을 사용하면 코드를 더 쉽게 작성할 수 있습니다. v-slot의 사용법을 익히면 코드를 보다 유연하게 구성하고 프로젝트 개발 효율성과 코드 품질을 향상시킬 수 있습니다. 🎜위 내용은 Vue에서 v-slot 기본 슬롯을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!