Application Scenario
The function of the slot is to insert the custom html structure and data data of the parent component at a certain position in the child component
Definition of three slots
There are three types of slots:
default slot named slot scoped slot
1. Default slot
definition: The default slot is to insert the structure and data of the parent component into the child component. The default slot has only one insertion position. The html structure and data data to be inserted must be in the parent component, but css can be in the child component Brief description in the component
: insert the custom html and data of the parent component into the corresponding position of the child component
Features: the parent component determines the structure and data
2. Named slot
definition: A named slot is simply a slot with a name, but the default slot has only one insertion position, and a named slot can have multiple insertion positions. The corresponding slot is identified according to the name Brief description
: Insert custom html and data of multiple parent components into multiple locations of child components
Features: Parent components determine structure and data
3. Scope slot
definition: the data data of the scope slot is fixedly written in the child component, and the html structure of the data is determined according to the html structure passed in from the parent component Brief description
: parse the data according to the different html structures in the parent component The characteristics of the data
: the child component determines the data, and the parent component determines the structure
Instructions
1. Default slot
parent component
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容，可以是template标签也可以是其他标签,比如<img src="图片地址" /> -->
<template>要插入的html内容</template>
</Child>
</template>
Subassembly
<template>
<div>
<!-- 插槽位置 -->
<!-- 插槽通俗的说就是：挖个坑，等组件的使用者进行填充-->
<slot>这里可以写默认值，当使用者没有传递具体结构时，会显示此内容</slot>
</div>
</template>
2. Named slots
parent component
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容 -->
<template slot="header">要插入的html内容1</template>
<template slot="center">要插入的html内容2</template>
<template slot="footer">要插入的html内容3</template>
</Child>
</template>
Subassembly
<template>
<div>
<!-- 插槽位置 -->
<slot name="header">插槽未被调用时会显示此内容</slot>
<slot name="center">插槽未被调用时会显示此内容</slot>
<slot name="footer">插槽未被调用时会显示此内容</slot>
</div>
</template>
3. Scoped slots
parent component
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容，作用域插槽必须要写template -->
<template slot="header">
<span v-for="m in data.msg" :key="m"></span>
</template>
<template slot="center">
<div v-for="m in data.msg" :key="m"></div>
</template>
<template slot="footer">
<label v-for="m in data.msg" :key="m"></label>
</template>
</Child>
</template>
Subassembly
<template>
<div>
<!-- 插槽位置 -->
<!-- 插槽的结构是由使用者决定的-->
<slot :msg="msg">插槽未被调用时会显示此内容</slot>
</div>
</template>
<script>
export default {
name: 'Child',
// 公用数据
data() {
return {
msg: ["火锅", "红烧肉", "烤羊腿"]
}
}
}
</script>
Original link
https://blog.csdn.net/weixin_43721000/article/details/123630524