Vue-插槽(Slots)

这篇具有很好参考价值的文章主要介绍了Vue-插槽(Slots)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 介绍

在Vue.js中,插槽是一种强大的功能,它允许你创建可重用的模板,并在使用该模板的多个地方插入自定义内容。

插槽为你提供了一种方式,可以在父组件中定义一些“插槽”,然后在子组件中使用这些插槽,插入自己的内容。

2. 插槽的分类

2.1 默认插槽(Default Slots)

这是最常见的插槽类型。如果你在一个组件模板中定义一个slot素,那么这个元素将被视为默认插槽的内容。

使用场景:只需要传入一个结构

案例:

  • 子组件(ChildComponent.vue):
<template>  
  <div>  
    <slot>默认内容</slot> <!-- 默认插槽 --> <!-- 里面可以包含默认内容,父组价没有传递,就展示默认内容 --> 
  </div>  
</template>
  • 父组件(ParentComponent.vue)
<template>  
  <ChildComponent>  
    <p>这是插入到默认插槽的内容</p>  <!-- 没有就展示子组件的默认内容,这里:可以为任意的html内容 --> 
  </ChildComponent>  
</template>

2.2 具名插槽(Named Slots)

具名插槽允许你在父组件中为子组件的特定部分提供内容。你可以通过在子组件的模板中添加slot标签,并为其指定一个名字,来定义具名插槽。

使用场景:一个组件内有多处结构,需要外部传入标签,进行定制 。

案例:

  • 子组件(ChildComponent.vue)
<template>  
  <div>  
    <slot name="header"></slot> <!-- 具名插槽 name="header"-->  
    <slot name="footer"></slot> <!-- 具名插槽 name="footer" -->  
  </div>  
</template>
  • 父组件(ParentComponent.vue)
<template>  
  <ChildComponent>  
    <template v-slot:header> <!-- 指定要插入到具名插槽的内容 -->  <!-- 这里的v-slot:可以替换为 # -->  
      <h1>这是头部内容</h1>  
    </template>  
    <template #footer> <!-- 指定要插入到具名插槽的内容 -->  
      <p>这是底部内容</p>  
    </template>  
  </ChildComponent>  
</template>

注:v-slot:可以替换为 #,方便进行简写

2.3 作用域插槽(Scoped Slots)

作用域插槽是一种特殊的具名插槽,它允许你访问子组件的数据和方法。通过作用域插槽,你可以在父组件中操作子组件的数据。

使用场景:封装表格组件

基本使用步骤:

  1. 给 slot 标签, 以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
  1. 所有添加的属性, 都会被收集到一个对象中
{ id: 3, msg: '测试文本' }
  1. 在template中, 通过 #插槽名= "obj" 接收,并使用,默认插槽名为 default
<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>

案例:

需求:假设我们有一个子组件ListComponent,它包含一个列表,并且我们希望在父组件中自定义每个列表项的内容。我们可以使用作用域插槽来实现这个需求。文章来源地址https://www.toymoban.com/news/detail-815425.html

  • 子组件(ListComponent.vue)
<template>  
  <ul>  
    <li v-for="item in items" :key="item.id">  
      <slot name="item" :item="item"></slot> <!-- 作用域插槽 -->  
    </li>  
  </ul>  
</template>
  • 父组件(ParentComponent.vue)
<template>  
  <ListComponent :items="items"> <!-- 将数据传递给子组件 -->  
    <template #item="{ item }"> <!-- 访问子组件的数据  这里使用了 js的对象解析-->  
      <p>{{ item.name }}</p> <!-- 使用子组件的数据 -->  
      <p>{{ item.description }}</p> <!-- 使用子组件的数据 -->  
    </template>  
  </ListComponent>  
</template>

到了这里,关于Vue-插槽(Slots)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)

    插槽是什么? 在 Vue 2 中,插槽(slot)是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容,并在组件内部进行渲染。 通过在组件模板中使用 slot/slot 标签,你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填

    2024年02月09日
    浏览(29)
  • Vue2基础八、插槽

    1、插槽 (1)默认插槽 作用:让组件内部的一些 结构 支持 自定义 需求: 将需要多次显示的对话框, 封装成一个组件 问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办? 插槽基本语法: 组件内需要定制的结构部分,改用 slot/slot 占位 使用组件时, MyDi

    2024年02月15日
    浏览(37)
  • vue2 自定义指令,插槽

    1.自定义指令 基本语法(全局、局部注册) 指令的值 v-loading的指令封装 2.插槽 默认插槽 具名插槽 作用域插槽 1.指令介绍 内置指令: v-html、v-if、v-bind、v-on … 这都是Vue给咱们内置的一些指令,可以直接使用 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指

    2024年02月11日
    浏览(42)
  • Vue2向Vue3过度核心技术插槽

    1.作用 让组件内部的一些 结构 支持 自定义 2.需求 将需要多次显示的对话框,封装成一个组件 3.问题 组件的内容部分, 不希望写死 ,希望能使用的时候 自定义 。怎么办 4.插槽的基本语法 组件内需要定制的结构部分,改用****占位 使用组件时, ****标签内部, 传入结构替换slo

    2024年02月11日
    浏览(39)
  • 【vue2】组件进阶与插槽详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :v-modedl表单双向绑定、ref|$ref操作dom、dynamic动态组件、$nextTick同步、匿名插槽、具名插槽、作用域插槽 目录(文末有给大家准备好的Xmind思维导图) 一、组件进阶 1.

    2024年02月03日
    浏览(40)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • 【前端】在Vue2中使用Vanta.js炫酷动态背景(全屏背景)

    官网:https://www.vantajs.com/ 由于博主在参考官网及官方GitHub进行应用时遇到一些问题,因此写了该篇博客,以避免大家因找Bug而浪费时间,方便快速的应用。 注意版本 Vue的版本如下 “vue”: “^2.6.14” 渲染容器 导包 方法 完整代码: 完整代码: 参加颜色参数 如果报错:‘X

    2024年02月11日
    浏览(48)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • Vue.js 插槽详解

    插槽允许我们在父组件中定义子组件的模板内容,从而实现动态组件的功能。具体来说,插槽可以用于以下场景: 父组件向子组件传递内容,例如按钮、表单、图片等。 子组件需要显示不同的内容,例如列表、选项卡、面包屑等。 Vue.js 提供了三种类型的插槽:具名插槽、默

    2024年01月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包