Vue插槽学习笔记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue插槽学习笔记,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3366字,纯文字阅读大概需要5分钟。
内容图文
插槽内容
创建示例组件slotdemo.vue
<template>
<div class="slotdemo">
<slot></slot>
</div>
</template>
注册组件
import slotdemo from 'slotdemo.vue'
Vue.component('slotdemo',slotdemo)
使用组件
<slotdemo>传入内容</slotdemo>组件标签外内容
这样<slot><slot>就会替换为你传入内容(text、html或其他组件),如果组件没包含<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
后备内容
如果组件插槽里设置了默认内容,则使用组件没传内容时会显示默认内容
<slot>后备内容</slot>
<slotdemo></slotdemo>
具名插槽
当组件有多个插槽时,可以给插槽命名来区分不同插槽
<template>
<div class="slotdemo">
<div>
<slot name="slotA">插槽1后备内容</slot>
</div>
<div>
<slot>默认插槽后备内容</slot>
</div>
<div>
<slot name="slotB">插槽2后备内容</slot>
</div>
</div>
</template>
通过v-slot指令可以在template标签,或者组件标签来指定插槽位置传入内容
<slotdemo>
<template v-slot:slotA>
传入内容到插槽1
</template>
</slotdemo>
<slotdemo v-slot:slotA>
传入内容到插槽1
</slotdemo>
一个不带name的插槽隐含的名字是default,可以不用指定,或v-slot:default。
作用域插槽
如果要调用组件里的数据,可以使用v-bind在slot标签上绑定,组件标签就可以通过插槽prop获取到数据
export default {
data() {
return {
user: {
firstName: '大大',
lastName:'欧阳'
}
}
}
}
<slot v-bind:user="user">默认插槽后备内容</slot>
<slotdemo>
<template v-slot:default="slotProps">
{{slotProps.user.lastName + slotProps.user.firstName}}
</template>
</slotdemo>
以上指向默认插槽的写法还能更简单,直接在组件标签上指定插槽位置,并省略隐藏名
<slotdemo v-slot="slotProps">
{{slotProps.user.lastName + slotProps.user.firstName}}
</slotdemo>
但如果和其他具名插槽混用,就要在template标签内指定,不然会报错
<slotdemo>
<template v-slot="slotProps">
{{slotProps.user.lastName}}
</template>
<template v-slot:slotB="slotProps">
{{slotProps.user.firstName}}
</template>
</slotdemo>
解构插槽Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里:
function (slotProps) {
// 插槽内容
}
所以可以将插槽prop解构出来
<slotdemo v-slot="{user}">
{{user.lastName + user.firstName}}
</slotdemo>
解构prop时能重命名
<slotdemo v-slot="{user:person}">
{{person.lastName}}
</slotdemo>
甚至可以定义后备内容,但要使用缩写(下面介绍),测试过原写法报错,后期应该会修复
<slot>默认插槽后备内容</slot>
<slotdemo #default="{user={lastName:'慕容'}}">
{{user.lastName}}
</slotdemo>
具名插槽的缩写
v-slot可以用 # 缩写,跟v-on( @ )和v-bind( : )一样,例如v-slot:slot1可以写成#slot1,注意不带name时的缩写是#default
<slotdemo #slot1>
传入内容到插槽1
</slotdemo>
<slotdemo #default="{user}">
{{user.firstName}}
</slotdemo>
slot和slot-scope特性
slot和slot-scope特性是2.6.0版本前的语法,之后的版本被废弃。
通过slot属性可以在template标签、普通标签指定插槽位置,不具名插槽用default或不指定,在组件标签指定无效
<slotdemo>
<template slot="slotA">
传入内容到插槽1
</template>
</slotdemo>
<slotdemo>
<div slot="default">传入内容到默认插槽</div>
</slotdemo>
通过slot-scope属性在template指定作用域插槽
<slot :user="user" name="slotA">插槽1后备内容</slot>
<slotdemo>
<template slot="slotA" slot-scope="slotProps">
{{slotProps.user.lastName}}
</template>
</slotdemo>
直接在普通标签指定默认插槽位置
<slot :user="user">默认插槽后备内容</slot>
<slotdemo>
<div slot-scope="slotProps">
{{slotProps.user.lastName}}
</div>
</slotdemo>
解构prop
<slotdemo>
<div slot-scope="{user}">
{{user.lastName}}
</div>
</slotdemo>
官方文档:https://cn.vuejs.org/v2/guide/components-slots.html
原文:https://www.cnblogs.com/yuzizsj/p/11999951.html
内容总结
以上是互联网集市为您收集整理的Vue插槽学习笔记全部内容,希望文章能够帮你解决Vue插槽学习笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。