Article directory
foreword
This article briefly introduces the use of named slots and scoped slots
1. What is a slot
1. A slot is a placeholder in a child component that is provided to the parent component. It is represented by < slot>< /slot > in the child component. The parent component can fill any template code in this placeholder, such as HTML , components, etc., the filled content will replace the < slot>< /slot > tags of the subcomponents. (Simply speaking, it is to dig a hole in the subcomponent for others to jump in)
2. After version 2.6.0, slot and slot-scope are replaced by v-slot.
3. Slots include default slots, named slots and scoped slots
2. Preliminary preparation
1、通过vue-cli创建好初始化项目
2、src下创建category.vue，同时在App.vue中引入
3. Use of named slots
1. Subcomponent configuration slot
Configure props in the child component, receive information from the parent component App and prepare two slots:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
//准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）
<slot name="center">默认插槽1</slot>
<slot name="footer">默认插槽2</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
};
},
props: ["title", "listData"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. User App.vue configuration data
Through the different names defined in the subcomponent category, the data can be displayed at the specified location:
//App.vue
<template>
<div id="app">
<category title="美食">
<img
slot="center"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""
/>
<a slot="footer" href="https://img1.qunarzz.com/travel">更多</a>
</category>
<category title="游戏">
<ul slot="center">
<li v-for="(g, index) in game" :key="index">{
{
g }}</li>
</ul>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">单机游戏</a>
<a href="https://img1.qunarzz.com/travel">网络游戏</a>
</div>
</category>
<category title="电影">
<video
slot="center"
width=""
height=""
controls
src="https://v.qq.com/x/cover/mzc00200dwnknik.html"
></video>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">更多信息1</a>
<a href="https://img1.qunarzz.com/travel">更多信息2</a>
</div>
</category>
</div>
</template>
<script>
import category from "./components/category";
export default {
name: "app",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
mounted() {
},
methods: {
},
components: {
category,
},
};
</script>
<style scoped>
#app,
#game {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
3. Results display
4. Summary of named slots
1. After defining the slot slot, add slot="name" to the label to be displayed, and the content to be displayed can be displayed at the specified position. 2. At the same time, it should be noted that the slot data of this
method The source game is provided in the App parent component, not in the child component itself. To reduce redundancy, scoped slots can be used to store data in the component defining the slot itself
Fourth, the use of scope slots
- Requires that the data to be displayed be placed in the group price that defines the slot
- The parent component App.vue just generates the structure based on the data, and the data is provided in the component that defines the slot
1. Subcomponent configuration slot
Props configured in child components only need to receive headers. Prepare two scoped slots and carry the data to display:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
<slot :G="games" :F="foods">作用域插槽</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
props: ["title"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. The user receives the data and sets the structure
//App.vue
<category title="游戏">
<template scope="zwt">
<!--ES6解构赋值，{
}直接拿到zwt.G的值 -->
<ul>
<li v-for="(g, index) in zwt.G" :key="index">{
{
g }}</li>
</ul></template
>
</category>
<category title="美食">
<template scope="{F}">
<!--ES6解构赋值，{
}直接拿到zwt.F的值 -->
<ol >
<li v-for="(f, index) in F" :key="index">{
{
f}}</li>
</ol>
</template>
</category>
3. Results display
4. Scope slot summary
1. It can solve the problem that there is no data to display in the user component, and it can be used when calling data from other components.
2. The component that defines the slot transmits its own data to the user, and the user configures the structure after receiving the data.
3. The user only determines the generated structure style, and the data is transmitted from the user (the component that defines the slot).
4. It can be understood that slot means that the parent component inserts a specific structure into the specified position of the child component.