生也有涯,知也无涯。这篇文章主要讲述vue2版本中slot的基本使用详解相关的知识,希望能为你提供帮助。
前言
在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述:
slot大概分为以下几种:
基础slot组件(匿名插槽)
匿名插槽主要使用场景并不涉及特别复杂的业务,更像是纯展示组件内容
<
!--子组件-->
<
template>
<
span>
我是基础slot子组件, 父组件传过来的值:
<
span style="color: red">
<
slot>
<
/slot>
<
/span>
<
/span>
<
/template>
<
!--父组件-->
<
li>
基础slot组件(匿名插槽):<
Base>
这是一段父组件传过来的文字<
/Base>
<
/li>
import Base from "./Base.vue";
具名插槽
具名插槽,需要在父组件和子组件约定插槽名称
<
!--子组件-->
<
template>
<
span>
<
span style="color: red">
<
slot name="name1">
<
/slot>
<
slot name="name2">
<
/slot>
<
/span>
<
/span>
<
/template>
<
!--父组件-->
<
li>
<
p>
具名插槽:<
/p>
<
Specific>
<
template v-slot:name1>
<
p>
name1传过来的内容<
/p>
<
/template>
<
template v-slot:name2>
<
p>
name2传过来的内容<
/p>
<
/template>
<
/Specific>
<
/li>
import Specific from "./Specific.vue";
作用域插槽
作用域插槽,子组件提供数据,父组件接收子组件的值并展示和处理逻辑
<
!--子组件-->
<
template>
<
span>
<
span>
<
slot name="scopeName" v-bind:scopeData="https://www.songbingjia.com/android/age">
<
/slot>
<
/span>
<
/span>
<
/template>
<
script lang="ts">
importComponent, Vue, Propfrom "vue-property-decorator";
@Component
export default class Scope extends Vue
private age: Number = 23;
<
/script>
<
!--父组件-->
<
li>
<
p>
作用域插槽<
/p>
<
Scope>
<
template v-slot:scopeName="childData">
作用域子组件slot返回的数据:
<
span style="color: red">
childData.scopeData
<
/span>
<
/template>
<
/Scope>
<
/li>
import Specific from "./Specific.vue";
解构插槽
解构插槽,类似在js书写对象过程中的对象解构
data: username:1
<
!--子组件-->
<
template>
<
span>
<
p>
<
slot v-bind:user="user">
<
/slot>
<
/p>
<
/span>
<
/template>
<
script lang="ts">
importComponent, Vue, Propfrom "vue-property-decorator";
@Component
export default class Deconstru extends Vue
private user: Object =
name: "zhangsan",
age: 23,
;
<
/script>
<
!--父组件-->
<
li>
<
p>
解构插槽<
/p>
<
Deconstru>
<
template v-slot=" user: person ">
父组件模板: person.name , person.age
<
/template>
<
/Deconstru>
<
/li>
import Specific from "./Deconstru.vue";
以上例子均已上传至开源仓库,后续关于vue的学习笔记均会更在在该项目上,欢迎star
- 码云 https://gitee.com/lewyon/vue-note
- githup https://github.com/akari16/vue-note
- 独占默认插槽
- 【vue2版本中slot的基本使用详解】动态插槽名
- 具名插槽的缩写
< template #footer> < p> Heres some contact info< /p> < /template>
文章个人博客地址:vue2版本中slot的基本使用详解
欢迎关注公众号:程序员布欧,不定期更新一些入门技术文章
创作不易,转载请注明出处和作者。
推荐阅读
- 手把手教你安装Ubuntu
- CentOS 开机启动流程
- Go语言入门很简单(如何在 Go 语言中使用 MySQL)
- C语言_数组的查找替换排序拼接
- K8S-ConfigMap与Secret
- Linux系统基础入门知识文件管理
- ModStartCMS 模块化建站系统 v3.9.0
- 网络基础命令与基础拓扑搭建
- Python推导式