详解Vue 匿名、具名和作用域插槽的使用方法

网络编程 2024/12/31 佚名

3 1 2

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 "htmlcode">

<template>
 <div>
 hello <slot>陌生人</slot>
 </div>
</template>

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。

<my-comp>
 oli
</my-comp>

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。

<template>
 <div>
 <slot name="nav"></slot>
 <br/>
 <slot name="content"></slot>
 <br/>
 <slot name="footer"></slot>
 </div>
</template>

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中：

<template>
 <div>
 <my-comp>
 <template slot="nav">navigator</template>
 <template slot="footer">footer</template>
 <template slot="content">content</template>
 </my-comp>
 </div>
</template>

另外，顺序并不重要，content 在 footer 下方但依然能够按照 slot 定义的顺序渲染：

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。 "data"></slot>

在组件 data 中创建数据：

export default {
 name: 'MyComp',
 data () {
 return {
 data: { // 内部状态
 username: 'oli'
 }
 }
 }
}

这样就可以在插槽中访问到子元素的数据了：

<template v-slot:default="user">{{user.data.username}}</template>

也可以不书写 default 关键字，默认就是假定对应默认插槽

<template v-slot="user">{{user.data.username}}</template>

使用 v-slot 绑定一个命名空间 user，这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时，需要明确书写对应的命名空间：

<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效

动态插槽名

另外，2.6 版本的 vue 还加入了动态插槽名的功能，用来动态的定义插槽名称：

<template #:[dynamicSlotName]></template>

https://cn.vuejs.org/v2/guide...

PS:Vue作用域插槽使用实例详解

这次给大家带来Vue作用域插槽使用详解，Vue作用域插槽使用的注意事项有哪些，下面就是实战案例，一起来看一下。

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，具体看案例和注释。

<!DOCTYPE html>
 <htmllang="en">
 <head>
  <metacharset="UTF-8">
  <title>Vue作用域插槽</title>
  <scriptsrc="/UploadFiles/2021-04-02/vue.js">

总结
以上所述是小编给大家介绍的Vue 匿名、具名和作用域插槽的使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue作用域插槽,vue匿名,vue具名

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解Vue 匿名、具名和作用域插槽的使用方法”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

详解Vue 匿名、具名和作用域插槽的使用方法

Vue匿名插槽与作用域插槽的合并和覆盖行为

详解Node.js一行命令上传本地文件到服务器

评论“详解Vue 匿名、具名和作用域插槽的使用方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接