开发者社区> asing1elife> 正文

Vue 实现 slot 多层嵌套

简介: 版权声明:本文首发 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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
159 0
Vue插槽(slot)详解与使用方法
Vue插槽(slot)详解与使用方法
61 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
636 0
Ant Design Vue 框架的a-table嵌套a-form-model达到验证效果
Ant Design Vue 框架的a-table嵌套a-form-model达到验证效果
319 0
vue面试题7:key的原理和slot的理解
v-slot属性只能在上使用,但在只有默认插槽时可以在组件标签上使用 默认插槽名为default,可以省略default直接写v-slot 缩写为#时不能不写参数,写成#default 可以通过解构获取v-slot={user},还可以重命名v-slot=“{user: newName}“和定义默认值v-slot=”{user = ‘默认值’}”
153 0
vue面试题4:1.组件通信;2.路由嵌套;3.< keep-alive >作用
请说明< keep-alive >组件的作用 当< keep-alive >包 裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 < keep-alive >是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。 当在< keep-alive >内切换组件时,它的activated 和deactivated 这两个生命周期钩子函数将会执行。
73 0
vue再读84-vue-router嵌套路由
vue再读84-vue-router嵌套路由
16 0
前端-vue基础96-vue router嵌套路由
前端-vue基础96-vue router嵌套路由
21 0
+关注
asing1elife
life is simple , just coding ...
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载