vue 插槽scope_Vue 插槽
一、概念
要了解 slot 插槽 , 首先需要了解自定义组件,以及组件中的模板
举例:
自定义一个组件名 tag1
//组件模板为
var tag1mes = {
template:`
- 狮子
- 是一种生存在非洲与亚洲的大型猫科动物
`
}
...定义一个局部组件
components:{
tag1:tag1mes
}
...
在结构中加入这个组件,利用浏览器调试工具,可以看到渲染的结构为
- 狮子
- 是一种生存在非洲与亚洲的大型猫科动物
模板页面渲染
此时此刻,如果我们想进一步丰富template模板中展示内容的灵活性,可以借助插槽slot
需求:如果我们想把模板中的狮子替换成老虎
二、如何实现?
匿名插槽
老虎 //将要写的内容写在标签内,像HTML标签一样
var tag1mes = {
template:`
- 是一种生存在非洲与亚洲的大型猫科动物
`
}
渲染后,狮子就变成老虎了
匿名插槽
此外可以添加默认值
var tag1mes = {
template:`
- 狮子
//slot中的是默认的,标签内为用户设置的,【设置没有显示默认,设置有,显示设置的】
是一种生存在非洲与亚洲的大型猫科动物`
}
呈现效果
老虎,渲染标题为老虎,
渲染结果为,默认的狮子,
最后,由于这种插槽没有name属性,因此叫【匿名插槽】
具名插槽
需求:如果不仅替换标题,还要替换标题的内容描述,怎么办?
显然
老虎, 大型猫科动物;毛色浅黄或棕黄色,满身黑色横纹;头圆、耳短,耳背面黑色,中央有一白斑甚显著。
怎么分开对应dt,dd标签是个问题
这时候可以使用具名插槽,见例子
老虎
大型猫科动物;毛色浅黄或棕黄色,满身黑色横纹;头圆、耳短,耳背面黑色,中央有一白斑甚显著。
template:`
- 狮子
- 是一种生存在非洲与亚洲的大型猫科动物
`
通过slot name的属性,将template slot="name名" 一一对应起来
具名插槽
三、新版本语法 v-slot
Vue的版本官方一直在更新变化,其中上面使用的 slot="xx" 以及后面会提及的 scope-slot="xx" 在2.6.0+ 中已弃用
所以我们要使用新的v-slot
语法格式
v-slot:slotName //slotName不能加双引号“”
匿名插槽在新语法下,默认指向default
v-slot:default
例子修改,结果仍然正常
老虎
大型猫科动物;毛色浅黄或棕黄色,满身黑色横纹;头圆、耳短,耳背面黑色,中央有一白斑甚显著。
注意事项
在旧版本中slot="xxx"的情况下,可以挂载在非 template标签上,如:
老虎
但是在v-slot:tit的情况下,必须使用template标签
老虎
否则报错:
Failed to compile.
v-slot can only be used on components or .
简写方式
如果你想使用简写语法,必需指定插值的名字
v-slot:header 简写成 #header
v-slot:default 简写成 #default
四、作用域插槽
意义何在?
如果你想 父组件访问子组件内部数据
语法格式:旧版本 slot-scope
slot-scope="slotProps" //slotProps为自定义的变量名,指向子组件中的data函数返回值
针对上面例子
//新旧语法不能混用在一个组件标签上
//slot="xxx" slot-scope="xx" 均为旧写法,是可以的
//v-slot:xxx slot-scope="xxx" 新旧写法混合,直接报错
//渲染错误: Unexpected mixed usage of different slot syntaxes
{{slotProps.txt1}}
var tag1mes = {
data:function(){
return {
txt1:'我是子组件里的数据: 猫头鹰'
}
},
template:`
- 狮子
- 是一种生存在非洲与亚洲的大型猫科动物
`
}
新语法格式为
v-slot:tit="slotProps" //slotProps为自定义的变量名,指向子组件中的data函数返回值
//将具名插槽赋值,很简洁;
//不仅完成插槽指向,还完成了数据挂载
例子改写:
{{slotProps.txt1}}
var tag1mes = {
data:function(){
return {
txt1:'我是子组件里的数据: 猫头鹰'
}
},
template:`
- 狮子
- 是一种生存在非洲与亚洲的大型猫科动物
`
}
上结果
作用域插槽
作用域插槽图解
父组件访问子组件内部数据
作用域插槽图解
插槽父子之间传值 2.6+
父组件
...
子组件
name="swiperSlide"
:dataMes='dataMes'
>
说明:
父组件通过 #slotName 获取子组件 ,
通过 { 数据名 } 获取子组件中的数据
vue 插槽scope_Vue 插槽相关推荐
- vue 插槽scope_Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 元素作为 ...
- 「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信
前言 插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
- Vue 中 slot插槽 的使用
Vue 中 slot插槽 的使用 插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
- Vue 之 slot(插槽)
前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&quo ...
- vue不具名插槽与具名插槽
vue不具名插槽与具名插槽 需求:面向未来编程,实现在未来中若出现修改内容可以简便的修改,而不需要将全部整改 思路:在组件Tabbar.vue(底部导航)当中使用不具名插槽,Tab-bar-item. ...
- vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容, ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- 理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
最新文章
- Ironport对邮件主题中包括特殊字符的过滤
- 分模块开发创建service子模块——(八)
- 人类最坏的发明:农药和塑料
- 【优化算法】多目标蝙蝠优化算法(MOBA)【含Matlab源码 005期】
- 通过对i8042 键盘控制器编程控制鼠标
- java控制台通讯录
- 盘点2021年最为流行的七个数据建模工具
- SQL2005安装错误1706,安装程序找不到需要的文件。请检查……,SQL没有安装OWC11”解决方法...
- 精益物流设计毕业论文【Flexsim仿真】
- ASCII编码以及转换
- 微信小程序weui-form表单的使用
- 怎样来实现数据接口的加密?
- 用计算机娱乐教学反思,计算机教学反思
- 域控内使用策略部署和软件分发
- nmn到底怎么样,nmn男性三高临床应用价值分享
- PAT (Advanced Level) Practice 1053 Path of Equal Weight (30 分)
- 联想开天s620z改win7和Linux,联想台式机预装win10改win7详细教程
- SCS【14】单细胞调节网络推理和聚类 (SCENIC)
- Arduino(二)——数码管显示(不同程序)
- [视频]QQ空间技术架构之深刻揭秘------技术体会
热门文章
- python实现最小堆
- 工业机器人滑膜变结构控制技术_工业机器人控制技术现状及发展
- 年轻By塞缪尔·厄尔曼
- 上传图片在浏览器可以正常查看 在手机不显示_手机主题微信气泡主题星河银...
- java毕业设计的社会公益平台mybatis+源码+调试部署+系统+数据库+lw
- visio多树枝直角加箭头_零基础国画教程:树枝基本画法详解,简单易学,小白也能学会!...
- 苹果手机如何找回id密码_上海iPhone11苹果手机被偷找回
- C2039	“OpenNI2Grabber”: 不是“pcl”的成员
- gitk安装(linux,window)
- 用python绘制一条红色蟒蛇_实例:用 Python 绘制一套“会跳舞”的动态图形