您现在的位置是:首页 > Javascript
当前栏目
v-slot匿名插槽、具名插槽及作用域插槽
2023-02-25 18:19:32 时间
匿名插槽
只要是没有具体分配的内容,都会给到匿名插槽或者 同时在子组件中需替换为用于占位,即在modal组件中自定义的内容都会显示在slot占位的位置
// 定义组件
Vue.component('modal', {
template: `
<div class="modal">
<div class="header">
<slot></slot>
</div>
</div>
注意<slot></slot> 等于 <slot name="default"></slot>
具名插槽
指带有名字的插槽,如果组件内需要多个插槽,因此配置了名字的插槽,才可以实现定向分发指定插入. 元素有一个特殊的attribute:name。这个attribute可以用来定义额外的插槽: (1)给插槽起名字
// 定义组件
Vue.component('modal', {
template: `
<div class="modal">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot name="main"></slot>
</div>
<div class="footer">
<slot name="default"></slot>
</div>
</div>
`,
})
(2)在分发内容时,通过template标签,将内容包裹,且里面可以添加任意标签内容,并指定分发的插槽名v-slot:插槽名。
作用域插槽
一个组件中有一个插槽,我们在插槽里写一个div,那么这个div就会被渲染到这个组件里,但是这个div又想调用这个组件里的数据或方法,那怎么办呢,我们可以加一个变量,把它带进插槽中。 简单来说:作用域插槽是一个带绑定数据的插槽。 通俗讲就是父组件需要用到子组件插槽里面数据的时候,通过v-slot:插槽名=’自定义对象名’来接收子组件插槽的数据
<template v-slot:default="scope">
<button>{{scope.yes}}</button>
<button>{{scope.no}}</button>
</template>
总结
1.具名插槽的内容必须使用模板包裹 2. 等价于 3.vue >=2.6.0版本,使用v-slot替代slot 和 slot-scope 4.v-slot:slotName,slotName不需要加引号”” 5.v-slot:header可以简写成#header , v-slot:default可以简写成#default
相关文章
- 前端——JavaScript
- json解析模块
- JavaScript 入门基础 / 概念介绍(一)
- Vue + SpreadJS 实现高性能数据展示与分析
- SpreadJS集算表联动数据透视表,高效实现前端数据多维分析
- 如何用 JavaScript 编写你的第一个单元测试
- 如何在JavaScript中使用for循环
- JavaScript中的箭头函数
- 有用的内置Node.js APIs
- 你不知道的JavaScript APIs
- 如何在JavaScript中使用高阶函数
- React报错之Property does not exist on type 'JSX.IntrinsicElements'
- 检查原生 JavaScript 函数是否被覆盖
- React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponent
- React报错之JSX element type does not have any construct or call signatures
- React报错之组件不能作为JSX组件使用
- 理解JavaScript中的window对象
- 让Node项目支持可扩展的环境配置
- 使用 DevTools 加速调试 Node.js 应用程序
- 讲述JSON Web Token(概念)