刚开始看的时候，以为Vue的插槽和React一样，我定睛一看，md原来不对，怎么越看越像React的props.children属性，但是比React这个属性要🐂一点。
插槽内容 （和children就一样了）
给大家搞个🌰
<my-component>这里的内容如果需要保留，就需要在my-component中使用 slot，如果不使用将丢弃这段内容</my-component> <slot>如果组件被使用 中间并没有传递任何内容的话 这个作为后备内容，也就是默认内容， 如果传递了则覆盖</slot>
多个插槽
多个插槽使用 v-slot 这个指令只能放在 template 上，在使用slot的时候指定name属性，例如
- my-component.vue
<div> <slot name="header"></slot> </div>
- main.vue
<div> <my-component> <template v-slot:header> // 可以使用简写 #header 这是头部插槽内容 </template> </my-component> </div>
插槽作用域
主要解决一个常见问题：父组件如何获取子组件的数据 并渲染
- my-component.vue
<template> <div> // 将headerData 通过v-bind暴露给父组件 <slot name="header" v-bind:data="headerData"></slot> </div> </template> <script> export default { props: { }, data() { return { headerData: {name: 'headerData'} }; }, }; </script>
- main.vue
<div> <my-component> <template v-slot:header="slotProps"> // 获取到子组件的数据 {{slotProps.data.name}} // 这就是数据 </template> </my-component> </div>
注意：父组件在使用子组件的时候 插槽和具名插槽不能嵌套，这样会导致作用域不明确
插槽数据工作原理
实际上就是利用回调函数的机制
function (slotProps) { // 插槽内容. 数据就是传递的参数罢了 普通函数 利用回调函数的机制 这样的话还可以对 slotProps进行解构 （有点东西啊，卧槽） } // 看看人家的写法。有点想放弃react的冲动 <current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }} </current-user>
插槽搞完了，快去看我别的文章吧！
本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
