【Vue】组件插槽
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【Vue】组件插槽，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2143字，纯文字阅读大概需要4分钟。
内容图文
注意：2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。
父组件模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在自作用域中编译的。
插槽分为三类：
1.匿名插槽（默认插槽），没有命名有且只有一个
2.具名插槽，即slot带有name
3.作用域插槽，子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)
匿名插槽(默认插槽，name为default)
在子组件通过slot添加匿名插槽
<template>
<div class="container">
<header>
<slot></slot>
</header>
<div>children</div>
</div>
</template>
父组件使用插槽
<template>
<div>
<children>
<template>Father use slot</template>
</children>
</div>
</template>
效果：
<slot>有name特性，当不填时默认为default，上例实际是子组件<slot name="default"/>，父组件
<template v-slot:default>默认插槽</template>
具名插槽
即指定子组件中name特性的值
<template>
<div class="container">
<slot></slot>
<header>
<slot name="title"></slot>
</header>
<div>children</div>
</div>
</template>
父组件
<template>
<div>
<children>
<template>默认插槽</template>
<template v-slot:title>具名插槽</template>
</children>
</div>
</template>
效果：
作用域插槽
能够访问子组件中才有的数据，重点是用slotProps接收子组件里的属性
子组件
<template>
<div class="container">
<header>
<slot name="header" :user="user">{{user.lastName}}</slot>
</header>
</div>
</template>
export default {
data() {
return {
user: {
firstName: "l",
lastName: "pr"
}
};
},
};
父组件
//slotProps可以随意命名，接收的是子组件标签slot上属性数据的集合
<template>
<div>
<children>
<template #header="slotProps">
<div>{{slotProps.user.firstName}}</div>
<div>{{slotProps.user.lastName}}</div>
</template>
</children>
</div>
</template>
效果:
结构prop
即是es6的解构赋值，子组件不变，父组件
<children>
<template #header="{user,arr}">
<div>{{user.firstName}}</div>
<div>{{arr[1]}}</div>
</template>
</children>
动态插槽名
在data中指定dynamicSlotName,通过改变dynamicSlotName的值来变换插槽
<template v-slot:[dynamicSlotName]>
...
</template>
具名插槽缩写
v-slot:header缩写为#header
原文：https://www.cnblogs.com/Mijiujs/p/12213392.html
内容总结
以上是互联网集市为您收集整理的【Vue】组件插槽全部内容，希望文章能够帮你解决【Vue】组件插槽所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。