Detailed Vue slot

Brief introduction

Slot: simple to understand internal components leaving one or more slot positions available for assembly into the template code corresponding to the transmission. Appears slot, so that the components become more flexible.

First, the anonymous sockets

//  组件（父）
  <my-component> <p>hello,world!</p> </my-component> // 组件内部（子） <div class="child-page"> <h1>子页面</h1> <slot></slot> // 替换为 <p>hello,world!</p> </div> // 渲染结果 <div class="child-page"> <h1>子页面</h1> <p>hello,world!</p> </div> 

These are the easiest slots eg anonymous

Second, the anonymous sockets

With slot name is the name suggests, if required to reserve multiple slots in the inner assembly position, it is necessary to define the name of the slot, designated inserted.

//  组件（父）
  <my-component> <template v-slot:header> <p>头部</p> </template> <template v-slot:footer> <p>脚部</p> </template> <p>身体</p> </my-component> // 组件内部（子） <div class="child-page"> <h1>子页面</h1> <slot name="header"></slot> <slot></slot> // 等价于 <slot name="default"></slot> <slot name="footer"></slot> </div> // 渲染结果 <div class="child-page"> <h1>子页面</h1> <p>头部</p> <p>身体</p> <p>脚部</p> </div> 

vue> = 2.6.0 version, using the v-slot alternative slot and slot-scope.

Attention to three points

• Board a named slot must use the template <template> </ template> parcel
• Template does not specify the name of the anonymous insertion slot, the slot is recommended to be named, convenient and intuitive tracking code is clear
• Anonymous slot with hidden name "default"

Third, the abbreviation named slots and dynamic slots name

Named slot abbreviations

  <my-component>
    <template #header> <p>头部</p> </template> <template #footer> <p>脚部</p> </template> <template #body> <p>身体</p> </template> </my-component> 

Dynamic Slot names

  <my-component> <template #[headerPart]> // v-slot:[headerPart] <p>头部</p> </template> <template #footer> <p>脚部</p> </template> <template #body> <p>身体</p> </template> </my-component> ... data() { return { headerPart: 'header' } } 

Fourth, the slot parameter passing

Father to son

//  组件（父）
  <my-component
    :title="'我是'" > <template #header> <p>头部</p> </template> <template #footer> <p>脚部</p> </template> <template #body> <p>身体</p> </template> </my-component> // 组件内部（子） <div class="child-page"> <h1>{{title}}子页面</h1> <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> </div> props: { title: { type: String } } 

The following parameters of this biography is wrong

  <my-component
    :title="'我是'" > <template #header> <p>{{title}}头部</p> // 错误 </template> <template #footer> <p>脚部</p> </template> <template #body> <p>身体</p> </template> </my-component> 

So if you need to dynamically modify the content of the slot, you need to pass parameters to the parent sub-assembly components.

Parent child transmission

//  组件（父）传参并接受参数
  <my-component
    v-bind="layout" // 传递参数 > // 可以使用ES6解构{ slotProps } <template #header="slotProps"> // 接受参数 <p>{{slotProps.headers}}</p> </template> <template #footer="slotProps"> <p>{{slotProps.footers}}</p> </template> <template #body="slotProps"> <p>{{slotProps.bodys}}</p> </template> </my-component> ... data() { return { layout: { header: '头部', body: '身体', footer: '脚部' } } } // 组件内部（子） <div class="child-page"> <h1>子页面</h1> <slot name="header" :headers="header"></slot> <slot name="body" :bodys="body"></slot> <slot name="footer" :footers="footer"></slot> </div> ... props: { header: { require: true }, body: { require: true }, footer: { require: true } } 

Summary: The
parent component sub-assemblies to pass parameters, after receiving props, into the slot and then bind the property to pass parameters back to the parent component, whether it is the template code or data, control rests in the hands of the parent component.