- 阐述
- 编写一个最基本的文件
- 插槽默认值的写法
- 具名插槽的使用
这节继续讲解插槽相关的知识，在上篇文章的学习中，你已经找到了插槽的简单使用方法。
这节我带着你深入学习，看插槽中经常使用的两个编写方法，插槽的默认值和具名插槽的使用。
DOCTYPE html>
Demo32
const app = Vue.createApp({
template: ` 欢迎光临大宝剑-请选择您的技师`
})
const vm = app.mount("#app")
为了学习插槽的默认值，我们先来复习一下上节学习的内容，编写一个最简单的组件，并使用插槽 slot。
在文件中先编写一个全局的组件JiShi，代码如下。
app.component('JiShi',{
template:`
你选择了为你服务。
`
})
有了插槽后就可以在使用组件的时候直接传递值了。
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
小红
`
})
这些都是上节的知识，我们就当做复习了。
现在来了一位新客人，第一次来，不好意思点技师，那我们就需要给他一个默认值，比如默认值是“小丽”。
默认值的关键语法就是在插槽中直接输入值就可以了。
app.component('JiShi',{
template:`
你选择了小丽为你服务。
`
})
现在这种编写方法，在有值传递过来的时候，会显示正常的值，没有值的时候就会显示默认值 ”小丽”。
这就是插槽中默认值的使用，如果你已经了解，我们再来学下一个知识，具名插槽。
DOCTYPE html>
Demo32
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
`
})
app.component('JiShi',{
template:`
你选择了小丽为你服务。
`
})
const vm = app.mount("#app")
先来看一个需求，就是如果你去做大宝剑，需要经历三个过程： 给顾客安排位置、选择技师、选择项目。
这是一个过程，是有先后顺序的，包括在页面上的显示也是要有顺序的。 于是我们写了一个组件。
组件代码如下：
app.component('DaBaoJian',{
template:`
1.男宾一位，请上二楼。
2.你选择了小红为你服务
3.你点了198元泰式按摩
`
})
程序编写的需求是这样的，选择谁为你服务不变，也就是第二个div中的内容不变。
但是第一句和第三句要能在父组件里使用插槽的方法进行定义。
你这时会发现程序有问题了，要把放在哪里？ 好像放在什么地方都不太合适，我们索性放两个，一个放在上面，一个放在下面，测试一下。
app.component('DaBaoJian',{
template:`
2.你选择了小红为你服务
`
})
然后在父组件调用的时候传递对应的值，比如把代码写成下面的样子。
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
1.女宾一位，请上三楼。
3.顾客选择了全身SPA。
`
})
这时候你打开浏览器，会发现插槽的位置出现了两次重复的内容。 也表示我们第一次的尝试失败了。
DOCTYPE html>
Demo32
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
1.女宾一位，请上三楼。
3.顾客选择了全身SPA。
`
})
app.component('DaBaoJian',{
template:`
2.你选择了小红为你服务
`
})
const vm = app.mount("#app")
其实Vue中已经提供了 具名插槽的使用方法，就是给标签加上一个name属性，你可以把子组件写成下面的样子。
app.component('DaBaoJian',{
template:`
2.你选择了大脚为你服务
`
})
然后父组件可以用下面的方式进行调用。
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
1.女宾一位，请上三楼。
3.顾客选择了全身SPA。
`
})
到现在就可以在一个组件里，分别定义两个插槽了。 希望你能学会这种方法。
现在来总结一下，通过这节的学习，你应该对插槽中的默认和具名插槽的使用方法有所了解。
这些知识在实际开发中使用的还是比较多的，能形成良好的模块机制。
DOCTYPE html>
Demo32
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
1.女宾一位，请上三楼。
3.顾客选择了全身SPA。
`
})
app.component('DaBaoJian',{
template:`
2.你选择了大脚为你服务
`
})
const vm = app.mount("#app")
