Vue 匿名、具名和作用域插槽的使用
Vue 匿名、具名和作用域插槽的使用
⭐️ 更多前端技术和知识点,搜索订阅号
JS 菌
订阅
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法。?
匿名插槽
子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽。只要在父元素中插入的内容,默认加入到这个插槽中去。?
<template>
<div>
hello <slot>陌生人</slot>
</div>
</template>
这里定义了一个默认插槽,只要往里头丢东西,就会被加入到这个插槽里面
⚠️ slot 元素里面可以加入一系列后备内容,一旦父元素没有插入任何信息,那么就会渲染后备内容。
<my-comp>
oli
</my-comp>
如在父组件中使用这个子组件,并插入 oli 字符串,效果如下:
具名插槽
具名插槽可以出现在不同的地方,不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。?
<template>
<div>
<slot name="nav"></slot>
<br/>
<slot name="content"></slot>
<br/>
<slot name="footer"></slot>
</div>
</template>
比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中:
<template>
<div>
<my-comp>
<template slot="nav">navigator</template>
<template slot="footer">footer</template>
<template slot="content">content</template>
</my-comp>
</div>
</template>
另外,顺序并不重要,content 在 footer 下方但依然能够按照 slot 定义的顺序渲染:
作用域插槽
通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据,那么作用域插槽就排上用场了。?
在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据:
<slot :data="data"></slot>
在组件 data 中创建数据:
export default {
name: 'MyComp',
data () {
return {
data: { // 内部状态
username: 'oli'
}
}
}
}
这样就可以在插槽中访问到子元素的数据了:
<template v-slot:default="user">{{user.data.username}}</template>
也可以不书写 default 关键字,默认就是假定对应默认插槽
<template v-slot="user">{{user.data.username}}</template>
使用 v-slot 绑定一个命名空间 user,这样就可以通过 user 对象引用到子组件中传入的数据了
⚠️ 与具名插槽配合时,需要明确书写对应的命名空间:
<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
#
代表 v-slot 的缩写,缩写在有参数的情况下才会生效
动态插槽名
另外,2.6 版本的 vue 还加入了动态插槽名的功能,用来动态的定义插槽名称:
<template #:[dynamicSlotName]></template>
https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D
- Python Syslog Server 开发实例
- WCF 学习总结2 -- 配置WCF
- SQLite事务 SQLite插入多条语句为什么这么慢?.net (C#)
- Linux 应用程序开发入门
- LINQ to XML LINQ学习第一篇
- PHP 安全与性能
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
- WPF备忘录(5)怎样修改模板中的控件
- Linux 系统与数据库安全
- 使用委托实现同步回调与异步回调
- Application Firewall Design
- Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
- C#基础知识回顾--串行化与反串行化
- Shell实用实例参考
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kubernetes-核心概念及创建应用(六)
- k8s1.13.0二进制部署-Dashboard和coredns(五)
- kubernetes监控-prometheus(十六)
- kubernetes监控-Heapster+InfluxDB+Grafana(十五)
- centos7 安装mysql5.7
- ceph-简介及安装(luminous)版
- Activiti7 查询用户任务列表
- ansible自动化部署工具
- IDEA Activiti 画图中文乱码
- k8s集群部署高可用完整版
- kubenetes-rancher多集群管理(二十二)
- kubernetes-helm程序包管理器(二十)
- Activiti7 组任务
- kubeadm快速部署kubernetes(十九)
- prometheus-简介及安装