Vue之插槽Slot理解
刚开始看的时候，以为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>插槽搞完了，快去看我别的文章吧！
本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录