slot
本文涉及的slot有:<slot>,v-slot吗,vm.$slots,vm.$scopedSlots
废弃的使用特性:slot,slot-scope,scope(使用v-slot,2.6.0)。
<slot>为vue的内置标签:用于给组件定义一个插槽,在这个插槽里传入内容(可以是模板代码或者组件),达到动态改变组件的目的。
v-slot指令:绑定内容到指定插槽,v-slot 只能添加在一个 <template>
上(当父组件中只提供了默认插槽的内容,v-slot可以写在组件上,见下面默认插槽缩写语法)
给插槽设置默认内容,在没有提供内容的时候被渲染。
<button type="submit">
<slot>Submit</slot>
</button>
具名插槽
栗子:<base-layout> 组件
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>//默认插槽,不带name
的<slot>
出口会带有隐含的名字“default”。
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
使用v-slot绑定内容到指定插槽(v-slot缩写为#,后面必须跟插槽名)
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
//放入默认插槽中
<p>A paragraph for the main content.</p>
<p>And another one.</p>
//放入默认插槽中
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
没被包裹在有 v-slot
或包裹在v-slot
为default的<template>
中的内容,会被视为默认插槽的内容。
v-slot使用动态插槽名:
<base-layout>
<template #[dynamicSlotName]>
...
</template>
</base-layout>
具有prop的插槽(作用域插槽)
作用:让插槽内容能够访问子组件中的数据
<slot :userNmae="user.name">//userNmae叫做插槽prop
</slot> //父作用域中,v-slot的值为包含默认插槽所有prop一的个对象,对象名取为slotProps
<template #default="slotProps">
{{ slotProps.userNmae }}
</template>
作用域插槽的使用:基于输入的 prop 渲染出不同的内容,达到复用插槽的目的。
解构插槽prop
在支持的环境下 (单文件组件或支持解构语法的浏览器),可以在v-slot里使用参数解构。
作用域插槽的内部工作原理是将插槽内容包括在一个传入单个参数的函数里:
function (slotProps) {
// 插槽内容
}
<current-user #default="{ user }">
{{ user.firstName }}
</current-user> //参数默认值,用于插槽 prop 是 undefined 的情形
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user> //user 重命名为 person
<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>
只提供了默认插槽内容时的v-slot简写
当被提供的内容只有默认插槽时,v-slot 直接用在组件上
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template>
的语法:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template> <template v-slot:other="otherSlotProps">
...
</template>
</current-user>
vm.$slots
组件vm.$slots.插槽名,返回对应插槽的内容。
栗子:
<anchored-heading :level="1">Hello world!</anchored-heading>
anchored-heading组件的模板为:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
})
anchored-heading 中的 Hello world!
,这些子元素被存储在组件实例中的 $slots.default
中
vm.$scopedSlots
访问作用域插槽,得到的是一个返回 VNodes 的函数。
props: ['message'],
render: function (createElement) {
// `<div><slot :text="message"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
在使用渲染函数,不论当前插槽是否带有作用域,推荐通过 $scopedSlots
访问。
slot的更多相关文章
- QT 中 关键字讲解(emit,signal,slot)
Qt中的类库有接近一半是从基类QObject上继承下来,信号与反应槽(signals/slot)机制就是用来在QObject类或其子类间通讯的方法.作为一种通用的处理机制,信号与反应槽非常灵活,可以携 ...
- kkjcre1p: unable to spawn jobq slave process, slot 0, error 1089(Linux x86_64)补丁
在shutdown immediately的时候,alert Log出现如下错误信息,并且不能正常关闭 kkjcre1p: unable to spawn jobq slave process, sl ...
- Qt里的slot
昨天出了一个小bug, 一直调都没调出来, 今天仔细看了下, 发现出错的原因了. 我在用osgEarth的时候, 用到一个类MapCatalogWidget, 觉得它不够用, 就把这个类给改了下, 添 ...
- Qt链接网站SLOT
void BottomToolWidget::openLink() { QString link = "http://www.baidu.com";//在.h中添加slot声明,在 ...
- slot游戏中的数学概念
最近研究slot 算法,看了大量的英文资料,因为母语中文,一直使用中文的英文小白来说,好心塞,悔不当初没学好英文. 下文是从众多的英文中摘录的唯一能够看明白的概念.先给自己留着,到时候深入研究可以看 ...
- right-click an action, missing "Go to slot"
According to the tutorial,to connect the actions to slots, right-click an action and select Go to sl ...
- 深入了解Qt(三)之元signal和slot
深入了解Qt主要内容来源于Inside Qt系列,本文做了部分删改,以便于理解.在此向原作者表示感谢! 在Qt 信号和槽函数这篇文章中已经详细地介绍了信号和槽的使用及注意事项.在这里对其使用方面的知识 ...
- slot的含义
1) slot就是槽的意思,是一个资源单位,只有给task分配了一个slot之后,这个task才可以运行.slot分两种,map slot沪蓉reduce slot.另外,slot是一个逻辑概念,一个 ...
- slot signal机制
有一个比较 经典的实现:http://sigslot.sourceforge.net/很精简的 signal slot的实现,跨平台.webrtc项目在用,我在自己项目里也用了.这个源码有2000多行 ...
- qt信号signal和槽slot机制
内容: 一.概述 二.信号 三.槽 四.信号与槽的关联 五.元对象工具 六.程序样例 七.应注意的问题 信号与槽作为QT的核心机制在QT编程中有着广泛的应用,本文介绍了信号与槽的一些基本概念.元对象工 ...
随机推荐
- 10分钟,AppCan帮你搞定跨平台开发APP问题!
跨平台开发APP时,开发者总会遇到一些问题,如打包失败等等,尤其对于iOS来说,由于它的限制性会导致一些状况发生(如证书上传问题等),小编总结了几个AppCan在线IOS打包失败常见的情况及排查技巧, ...
- 装饰器模式以及Laravel框架下的中间件应用
Laravel框架的中间件使用:从请求进来到响应返回,经过中间件的层层包装,这种场景很适合用到一种设计模式---装饰器模式. 装饰器模式的作用,多种外界因素改变对象的行为.使用继承的方式改变行为不太被 ...
- L2-4 部落 (25 分)
在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不同的朋友圈.我们认为朋友的朋友都算在一个部落里,于是要请你统计一下,在一个给定社区中,到底有多少个互不相交的部落?并且检查任意两个人是否属于同 ...
- Neutron:ML2 Core Plugin
两个 Core Plugin:linux bridge plugin 和 open vswitch plugin. Moduler Layer 2(ML2)是 Neutron 在 Havana 版 ...
- git branch --set-upstream 本地关联远程分支
最近使用git pull的时候多次碰见下面的情况: There is no tracking information for the current branch.Please specify whi ...
- Python——Flask框架
Flask框架相关知识构架 程序的基本结构 模板 Web表单 数据库 电子邮件 程序的结构 用户认证
- Java拓展接口-default关键词
Java接口在使用过程中有两点规定: 1.接口中只能有定义方法名.方法返回类型,不能有方法的实现. 2.实现接口的类,必须实现接口中所有的方法. 例如下面的例子: //定义接口 public inte ...
- 【论文阅读】Sequence to Sequence Learning with Neural Network
Sequence to Sequence Learning with NN <基于神经网络的序列到序列学习>原文google scholar下载. @author: Ilya Sutske ...
- python之异常处理和re模块补充
一.re模块的补充 1.从一个字符串中获取要匹配的内容 findall:返回一个列表 2.search ***** 验证用户输入内容 '^正则规则$':返回一个对象,用group()取值 3.matc ...
- Centos 32位 安装 NodeJS
准备命令: yum -y install gcc make gcc-c++ openssl-devel wget 下载源码及解压: wget https://nodejs.org/dist/v6.9. ...