vue 插槽scope_Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法。分享给大家供大家参考,具体如下:
1 插槽内容
Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 元素作为承载分发内容的出口。
它允许你像这样合成组件:
Your Profile
然后你在 的模板中可能会写为:
Vue.component('navigation-link', {
template: `
v-bind:href="url" rel="external nofollow"
class="nav-link"
>
`
});
当组件渲染的时候,这个 元素将会被替换为“Your Profile”。
插槽内可以包含任何模板代码,包括 HTML:
Your Profile
甚至其它的组件:
Your Profile
如果 没有包含一个 元素,则任何传入它的内容都会被抛弃。
2 具名插槽
有些时候我们需要多个插槽。例如,一个假设的 组件多模板如下:
对于这样的情况, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
在向具名插槽提供内容的时候,我们可以在一个父组件的 元素上使用 slot特性:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
另一种 slot 特性的用法是直接用在一个普通的元素上:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
我们还是可以保留一个未命名插槽,这个插槽是默认插槽,也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
3 默认插槽的内容
有的时候为插槽提供默认的内容是很有用的。例如,一个 组件可能希望这个按钮的默认内容是“Submit”,但是同时允许用户覆写为“Save”、“Upload”或别的内容。
你可以在 标签内部指定默认的内容来做到这一点。
Submit
如果父组件为这个插槽提供了内容,则默认的内容会被替换掉。
4 编译作用域
当你想在插槽内使用数据时,例如:
Logged in as {{ user.name }}
该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。但这个插槽不能访问 的作用域。例如尝试访问 url 是不会工作的。牢记一条准则:
父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
5 作用域插槽
2.1.0+ 新增
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 组件的模板可能包含了如下代码:
Vue.component('todo-list',{
template:`
v-for="todo in todos"
v-bind:key="todo.id">
{{ todo.text }}
`
});
但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。
为了让这个特性成为可能,你需要做的全部事情就是将待办项内容包裹在一个 元素上,然后将所有和其上下文相关的数据传递给这个插槽:在这个例子中,这个数据是 todo 对象:
v-for="todo in todos"
v-bind:key="todo.id"
>
{{ todo.text }}
现在当我们使用 组件的时候,我们可以选择为待办项定义一个不一样的 作为替代方案,并且可以通过 slot-scope特性从子组件获取数据:
✓
{{ slotProps.todo.text }}
在 2.5.0+,slot-scope 不再限制在 元素上使用,而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效,那么这个表达式实际上就可以被 slot-scope接受。也就是说你可以在支持的环境下 单文件组件或现代浏览器),在这些表达式中使用 ES2015 解构语法。例如:
✓
{{ todo.text }}
这会使作用域插槽变得更干净一些。
希望本文所述对大家vue.js程序设计有所帮助。
vue 插槽scope_Vue插槽原理与用法详解相关推荐
- python的编程模式-Python设计模式之状态模式原理与用法详解
本文实例讲述了Python设计模式之状态模式原理与用法.分享给大家供大家参考,具体如下: 状态模式(State Pattern):当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类 ...
- java设计模式观察者模式吗_Java设计模式之观察者模式原理与用法详解
Java设计模式之观察者模式原理与用法详解 本文实例讲述了Java设计模式之观察者模式原理与用法.分享给大家供大家参考,具体如下: 什么是观察者模式 可以这么理解: 观察者模式定义了一种一对多的依赖关 ...
- python字符串strip的作用_Python字符串函数strip()原理及用法详解
Python字符串函数strip()原理及用法详解 strip:用于移除字符串头尾指定的字符(默认为空格)或字符序列.注意:该方法只能删除开头或是结尾的字符,不能删除中间部分的字符. 语法:str.s ...
- python装饰器原理-Python函数装饰器原理与用法详解
本文实例讲述了Python函数装饰器原理与用法.分享给大家供大家参考,具体如下: 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值 ...
- java 字节缓冲_Java字节缓冲流原理与用法详解
本文实例讲述了Java字节缓冲流原理与用法.分享给大家供大家参考,具体如下: 一 介绍 BufferInputStresm和BufferOutputStream 这两个流类为IO提供了带缓冲区的操作, ...
- mysql的存储过程原理_mysql存储过程原理与用法详解
本文实例讲述了Mysql存储过程原理与用法.分享给大家供大家参考,具体如下: 本文内容: 什么是存储过程 存储过程的创建 存储过程的使用 查看存储过程 修改存储过程 删除存储过程 首发日期:2018- ...
- python适配器模式角色_Python设计模式之适配器模式原理与用法详解
本文实例讲述了Python设计模式之适配器模式原理与用法.分享给大家供大家参考,具体如下: 适配器模式(Adapter Pattern):将一个类的接口转换成为客户希望的另外一个接口. 下面是一个适配 ...
- mysql游标 原理解说_mysql存储过程之游标(DECLARE)原理与用法详解
本文实例讲述了mysql存储过程之游标(DECLARE)原理与用法.分享给大家供大家参考,具体如下: 我们在处理存储过程中的结果集时,可以使用游标,因为游标允许我们迭代查询返回的一组行,并相应地处理每 ...
- chmod命令原理及用法详解
Chmod命令主要用于修改.设置文件权限 chmod 修改文件权限主要有两种方式: 字母法与数字法 虽然数字法相对字母法简单,但是数字法是基于字母法,所以这里先介绍字母法. 1.字母法:chmod ...
最新文章
- 深入理解Java Stream流水线,学到了!
- PowerPoint中的LinkFormat对象
- 科研人员的办公室是怎样的?
- springboot实现简单的文件上传与回显
- 矩阵相乘入门,两个矩阵相乘
- PHP于js的交互,关于php与js交互问题
- 手势在c语言的作用,手势态度在人际交往中的重要性
- BugkuCTF-Reverse题逆向入门
- PHP制作订货,PHP生成订单号的两种方法
- openstack 重启mysql_openstack 重启服务命令
- abcde依次进入一个队列_『并发包入坑指北』之阻塞队列
- 架构师如何带领团队“攻城略地”?
- 手机号码校验正则表达式
- 计算机id和密码忘了怎么办,苹果账号密码忘记了怎么办_苹果忘了id账号和密码的处理方法...
- 剑指offeⅤ(Java 持续更新...)
- 小程序云函数new Date()获取的时间和new Date().getDay()获取的时间不一致 / 云函数存入的时间不对 /小程序云开发配置时区
- VB / VBA 自制二维码小工具
- HarmonyOS应用开发实战 | 开发运动手表小游戏
- 兰吉尔FFC3 电表电能量采集终端替代方案(DLMS红外光电采集器)
- STM32的介绍及MDK