Vue 实现 slot 多层嵌套

本文涉及的产品
图片翻译,图片翻译 100张
语种识别,语种识别 100万字符
文档翻译,文档翻译 1千页
简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766842 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766842

Vue 实现 slot 多层嵌套

在引用一些框架时,通常他们自己就已经有插槽,但有时需要对插槽进行拓展

更多精彩

定义基础组件,向插槽中再插入一个插槽

  1. 在基础组件中引入了 Mint-UI 的 mt-header 组件
  2. 并通过其提供的具名插槽向组件右侧插入内容
  3. 但该组件是我们自定义的,我们并不知道组件被调用时会被插入什么内容
  4. 所以在该组件中插入该具名插槽的内容也是一个插槽
  5. 关键点在于这个插入的未知内容的插槽也必须是具名的
<template>
  <mt-header>
    <img class="logo" src="./images/logo.png" alt="logo" slot="left">
    <slot name="button" slot="right"></slot>
  </mt-header>
</template>

子组件引用基础组件,像二级插槽中插入具体内容,并指定二级插槽的名称

  1. 在引入组件时,只需要将待插入的内容插槽名称与基础组件中覆写的插槽名称对应即可
<template>
  <div class="portal-panel">
    <in-header>
      <div class="btn-group" slot="button">
        <mt-button>登录</mt-button>
        <mt-button>注册</mt-button>
      </div>
    </in-header>
  </div>
</template>
目录
相关文章
|
13天前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
71 4
|
2天前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
1月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
128 56
|
1月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
171 13
|
1月前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
1月前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
JavaScript API
Vue | Vuejs 组件化 - 插槽Slot/非父子通信
Vue | Vuejs 组件化 - 插槽Slot/非父子通信
|
JavaScript
Vue插槽 slot 标签
Vue插槽 slot 标签
154 0
|
11月前
|
JavaScript
VUE组件: 请解释Vue的插槽(slot)是什么?
VUE组件: 请解释Vue的插槽(slot)是什么?
83 1
下一篇
oss创建bucket