首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

vue 2.6slot 的新用法

最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?...如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读。也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要。 插槽是什么?...但是,要将内容添加到命名槽中,我们需要用v-slot指令将代码包裹在在template标记中。在v-slot之后添加冒号(:),然后写出要传递内容的slot的名称。...注意,v-slot是Vue 2.6的新版本,所以如果你使用的是旧版本,则需要阅读关于不推荐的slot语法的文档。 作用域插槽 还需要知道的另一件事是插槽可以将数据/函数传递给他们的孩子。...v-slot 的别名是#。因此,可以用#header="data" 来代替 v-slot:header="data"。

1.6K20

VUE作用域插槽详解(<slot>、v-slotslot-scope)「建议收藏」

> //默认插槽 //slot内为后备内容 没传内容 //具名插槽 ... 渲染结果为 v-slot 在vue2.6中。...上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】 子组件用法保持不变,父组件中 slot属性弃用,具名插槽通过指令参数v-slot:插槽名的形式传入,可以简化为...={user},还可以重命名v-slot="{user:newName}"和定义默认值v-slot="{user = '默认值'}" 插槽名可以是动态变化的v-slot:[slotName] 注意 1....在2.6之后,两者合并,普通插槽也变成一个函数,只是不接受参数了 因为第二篇文章有些新的可取之处,所以又整合了这篇文章加深理解,原文链接:https://blog.csdn.net/H_c_l/article

7.8K20

slot基本使用

slot基本使用 了解了为什么用slot,我们再来谈谈如何使用slot? 在子组件中,使用特殊的元素就可以为子组件开启一个插槽。 该插槽插入什么内容取决于父组件如何使用。...我们通过一个简单的例子,来给子组件定义一个插槽: 中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容 有了这个插槽后,父组件如何使用呢?...非常简单,只要给slot元素一个name属性即可 我们来给出一个案例: 这里我们先不对导航组件做非常复杂的封装,先了解具名插槽的用法。...image.png 作用域插槽:准备 作用域插槽是slot一个比较难理解的点,而且官方文档说的又有点不清晰。...利用slot作用域插槽就可以了 我们来看看子组件的定义: image.png 作用域插槽:使用 在父组件使用我们的子组件时,从子组件中拿到数据: 我们通过<template slot-scope="slotProps

84620

vue之插槽(slot)

关于slot是这样说的, 除非子组件模板包含至少一个 slot 插口,否则父组件的内容将会被丢弃。...当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。 最初在 slot 标签中的任何内容都被视为备用内容。...单个 Slot 在子组件内使用特殊的slot元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的slot标签及它的内容.示例代码如下: <!...具名 Slotslot 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例: <!...元素,其中在 内的slot 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.

81130
领券