Vue如何跨组件传递Slot的实现


Posted in Vue.js onDecember 14, 2020

在开发过程中遇到这样一个问题,如何跨组件传递插槽。因为在开发类似树组件的过程中,插槽需要通过外部传递到树的根节点,然后通过根节点依次传递到各个叶子节点。那么如何把根节点的Slot如传递给子组件呢?
我们在开发过程中,希望可以这样实现重新定义叶子节点的结构:

<data-tree>
 <template v-slot:node="data">
   <div>{{data.title}} - {{data.text}}</div>
  </template>
</data-tree>

那么如何在组件内传递Slot就是一个问题。

嵌套传递

通过固定级别的组件结构里可以通过直接书写<v-slot ...>来传递对应的Slot元素,来实现一层一层的传递。

<data-tree>
 <data-tree-item>
   <template :node="data">
      <slot :data="data"> xxx </slot>
    </template>
  </data-tree-item>
</data-tree>

通过在外层创建slot可以逐层将slot进行传递,但是如果过多的嵌套层次,这样就显得很麻烦。

Render

还有一种方案是通过Render函数来进行显示,可以通过$slots来访问当前组件的slot元素,然后通过Render函数创建新组件时,将slot传递给下一层。

h('data-tree-item',{
 scopedSlots: {
    node: props => this.$slots.node(props)
  },
})

这样通过Render子元素就可以接受到对应的Slot,也实现了传递。

动态组件

还有一种方式是通过动态组件,也是认为比较推荐的实现方式,不是通过传递Slot,而是通过子节点主动去获取根节点的Slot对象,然后直接在UI中渲染出来。

为此我们需要创建一个组件来渲染对应的Slot对象。

首先需要获取根节点:

const rootComponentName = 'data-tree'
/**
 * 获取父组件
 */
const getRootComponent = (
  component: ComponentInternalInstance | null
): ComponentInternalInstance | undefined => {
  if (component && component.type.name === rootComponentName) {
    return component
  }

  if (component && component.parent) {
    const parent = component.parent
    return getRootComponent(parent)
  }
}

通过递归我们可以获取到对应的父节点,这样我们就可以把Slot作为Data暴露出来

setup(props) {
    // 获取根节点
    const dataTree = getRootComponent(getCurrentInstance())
    const parentSlots = dataTree?.slots
    const nodeTemplate = parentSlots?.node as any
    return {
      nodeTemplate
    }
  }

这时候我们需要一个组件来渲染暴露出来的Slot:

components: {
    TemplateContainer: {
      functional: true,
      props: {
        template: {
          type: Function
        },
        data: {
          type: Object
        }
      },
      render: (props, ctx) => h('div', [props.template(props.data)])
    }
  }

好了现在该准备的都准备好了,可以去实现UI的显示了:

<template-container
          v-if="nodeTemplate"
          :template="nodeTemplate"
          :data="node">
</template-container>
<template v-else>
    {{ node.label }}
</template>

这样我们就实现了类似下面定义Slot的传递,也解决了我们跨组件传递Slot的问题。

<slot :data="node" name="node">
 {{ node.label }}
</slot>

本文使用的是Vue 3的事例,Vue 2也是相同的概念,在Vue 3中除了使用getRootComponent来查询跟节点,也可以使用Provide/Inject来将Slot主动传递给子节点。

到此这篇关于Vue如何跨组件传递Slot的实现的文章就介绍到这了,更多相关Vue 跨组件传递Slot内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
PHP脚本数据库功能详解(中)
2006/10/09 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python实现读取json文件到excel表
2017/11/18 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
深入学习python多线程与GIL
2019/08/26 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
《童趣》教学反思
2014/02/19 职场文书
职位说明书范文
2014/05/07 职场文书
绿色出行口号
2014/06/18 职场文书
真诚的求职信
2014/07/04 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书