小编今天和大家一起探讨Vue中的插槽(slot)的概念，熟悉Vue的小伙伴都知道父子组件之间可以相互传递数据，但是传递DOM结构的时候，再通过属性的方式就有些麻烦，我们先来看个父子组件的例子。大家还可以关注我的微信公众号，蜗牛全栈。
const app= Vue.createApp({
template: `<myform />`
})
app.component('myform',{
methods:{
handleClick(){
alert('handleClick')
}
},
template: `<div>
<input />
<button @click="handleClick">提交</button>
</div>`
})
const vm = app.mount("#root")
上面是一个最基本的父子引用的例子，在父组件中使用的是类似h5中input单标签，有的时候我们会有这样的需求，对于上面的提交，我们有的时候希望渲染成一个按钮，有的时候我们只是希望渲染成普通div。这个时候slot就显示出威力了，我们可以把代码写成这样
const app= Vue.createApp({
// 将原来的单标签修改为双标签，标签之间的内容会替换掉子组件中的<slot></slot>
template: `<myform>
<div>提交</div>
</myform>
<myform>
<button>提交</button>
</myform>`
})
app.component('myform',{
methods:{
handleClick(){
alert('handleClick')
}
},
// 不能在slot直接添加@click方式，可以在外面添加span标签
template: `<div>
<input />
<span @click="handleClick">
<slot></slot>
</span>
</div>`
})
const vm = app.mount("#root")
其实对于slot，我们肯定不能仅仅满足于此，有的时候也需要进行数据绑定，对于父子组件，遵循的就是父组件中父组件绑定数据，子组件中子组件绑定数据。不会相互混淆
const app= Vue.createApp({
data(){
return {
f_data:'1234'
}
},
template: `<myform>
<test />
</myform>
<myform>
{{ f_data }}
</myform>`
})
app.component('myform',{
methods:{
handleClick(){
alert('handleClick')
}
},
template: `<div>
<input />
<span @click="handleClick">
<slot></slot>
</span>
</div>`
})
app.component('test',{
template: `<div>
test component slot
</div>`
})
const vm = app.mount("#root")
在定义了slot之后，如果自定义组件之间什么也不传递的话，默认是空字符串，如果我们希望添加默认值的话，可以这样
const app= Vue.createApp({
template: `<myform></myform>`
})
app.component('myform',{
methods:{
handleClick(){
alert('handleClick')
}
},
template: `<div>
<input />
<span @click="handleClick">
<slot>这里是插槽的默认值</slot>
</span>
</div>`
})
const vm = app.mount("#root")
有时候我们希望不同的slot渲染不同的内容，这个时候，具名插槽对我们就很有用了，就像这样
const app= Vue.createApp({
template: `<layout>
// 一定通过template标签，不能将v-slot作用在h5标签上
<template v-slot:header>
<div>header</div>
</template>
<template v-slot:footer>
<div>footer</div>
</template>
</layout>`
})
app.component('layout',{
template: `<div>
<slot name="header"></slot>
<div>content</div>
<slot name="footer"></slot>
</div>`
})
const vm = app.mount("#root")
当然，我们也可以通过#简写成这样
const app= Vue.createApp({
template: `<layout>
// 通过#替代v-slot
<template #header>
<div>header</div>
</template>
<template #footer>
<div>footer</div>
</template>
</layout>`
})
app.component('layout',{
template: `<div>
<slot name="header"></slot>
<div>content</div>
<slot name="footer"></slot>
</div>`
})
const vm = app.mount("#root")
有时候，我们可能需要在子组件渲染数据，然后在父组件定义不同的标签，这个时候，我们会用到作用域标签
const app= Vue.createApp({
template: `
<mylist />
// 作用域插槽
<mylist v-slot="slotProps">
<span>{{slotProps.item}}</span>
</mylist>
`
})
app.component('mylist',{
data(){
return {
list: [1,2,3]
}
},
template: `<div>
<slot v-for="item in list" :item="item"></slot>
</div>`
})
const vm = app.mount("#root")
