文章目录
一、插槽概念
介绍:
- slot插槽、首先这个插槽是使用在子组件的。
- 子组件为了自己的复用性更高,就会在子组件里面挖坑,然后再父组件里面去填坑
使用:
- slot一般都是子组件定义主体部分
- 父组件引入子组件、然后父组件根据需求不同、去向子组件里面的插槽添加内容
二、普通slot插槽
2.1 基本使用
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 使用子组件 -->
<Son>
<!-- 在子组件里面去写给slot里面的东西 -->
写给插槽的一封信
</Son>
</div>
</template>
<script>
// 引入子组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 插槽 -->
<slot></slot>
</div>
</template>
2.2 使用升级?
- 当我需要很多个插槽、然后每一个插槽放对应插槽的东西
出现问题:本想一个插槽一份数据、现在每一个插槽两份数据。
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是复用子组件的内容 -->
<Son>
<!-- 再组件里面去写给slot里面的东西 -->
<h2>这是传给第一个插槽的</h2>
<h3>这是传给第二个插槽的</h3>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 写了两个插槽 -->
<slot></slot>
<slot></slot>
</div>
</template>
2.3 slot具名插槽
作用:
- 一个萝卜一个坑,将父组件的内容插入到指定的子组件位置中去
语法:
- 子组件定义slot时、在标签上加上name="一号萝卜坑"属性
- 父组件将向插入的部分最外部分的div上加上slot="一号萝卜坑"属性
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是复用子组件的内容 -->
<Son>
<!-- 再组件里面去写给slot里面的东西 -->
<h2 slot="slot1">这是传给第一个插槽的</h2>
<h3 slot="slot2">这是传给第二个插槽的</h3>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 第一个插槽 -->
<slot name="slot1"></slot>
<!-- 第二个插槽 -->
<slot name="slot2"></slot>
</div>
</template>
三、v-slot插槽
ps:因为slot和scope-slot在后续的vue3中彻底不在更新了,所以官方推荐我们使用v-slot
!!!注意注意:
- v-slot只能添加到==< template>== 或自定义组件上
- v-slot的简写方式是:==#==号
3.1 基本使用
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是复用子组件的内容 -->
<!-- v-slot写在子组件里面 -->
<Son v-slot:default>
<!-- 再组件里面去写给slot里面的东西 -->
<h2>这是v-slot默认</h2>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>
3.2 引入组件写入其他组件
思路:在父组件中、将一个工具人组件通过插槽插入到子组件中去
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是复用子组件的内容 -->
<!-- v-slot写在子组件里面 -->
<Son v-slot:default>
<!-- 再组件里面去写给slot里面的东西 -->
<h2>这是v-slot默认</h2>
<utils></utils>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
import utils from "./utils.vue";
export default {
// 注册组件
components: {
Son,
utils
},
};
</script>
/src/views/utils.vue(工具人组件)
<template>
<div>
<!-- 我是一个被插入到son子组件的内容 -->
<h4>我的名字叫工具人</h4>
</div>
</template>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>
3.3 v-slot具名插槽
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是子组件的内容 -->
<Son>
<template #header>
<h2>这是头部插槽</h2>
</template>
<template #footer>
<h2>这是底部插槽</h2>
</template>
<template #default>
<h2>这是默认插槽</h2>
</template>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 头部插槽 -->
<slot name="header"></slot>
<!-- 底部插槽 -->
<slot name="footer"></slot>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>
3.4 插槽作用域
- 父组件的数据可以直接下发给插槽
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是子组件的内容 -->
<Son>
<template #default>
{{name}}
</template>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
data() {
return {
name: 'im father message',
};
},
};
</script>
/src/views/son.vue(子组件)
- 只是在子组件中发了
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 头部插槽 -->
<slot name="header"></slot>
<!-- 底部插槽 -->
<slot name="footer"></slot>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>
3.5 通过插槽使用子组件的值
注意:
- 子组件声明:数据名、插槽名
- 父组件应用:#插槽名=“新建数据名”
- 父组件应用:#插槽名=“{数据名}”,支持解构
- 子组件传来的数据是{数据名:对应数据}
/src/views/father.vue(父组件)
<template>
<div>
<h1>我是父组件</h1>
<!-- 这是子组件的内容 -->
<Son>
<!-- 插槽一自取名称 -->
<!-- 对象{数据名称,对应数据} -->
<template #slotname1="zjf">
{{ zjf }}
</template>
<!-- 插槽二 使用解构取名字-->
<!-- 对应数据 -->
<template #slotname2="{slotdata2}">
{{ slotdata2 }}
</template>
</Son>
</div>
</template>
<script>
// 引入组件
import Son from "./son.vue";
export default {
// 注册组件
components: {
Son,
},
};
</script>
/src/views/son.vue(子组件)
<template>
<div>
<h2>我是子组件(为了复用)</h2>
<!-- 插槽1 -->
<slot :slotdata1="user1" name="slotname1"></slot>
<hr />
<!-- 插槽2 -->
<slot :slotdata2="user2" name="slotname2"></slot>
</div>
</template>
<script>
export default {
// name: "slotfour",
data() {
return {
user1: [
{ name: "Jack", sex: "boy" },
{ name: "Jone", sex: "girl" },
{ name: "Tom", sex: "boy" },
],
user2: [
{ name: "Jack2", sex: "boy2" },
{ name: "Jone2", sex: "girl2" },
{ name: "Tom2", sex: "boy2" },
],
};
},
};
</script>