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中的自定义指令
Dec 07 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue实现简易音乐播放器
Aug 14 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设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python 字典套字典或列表的示例
2019/12/16 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
担保书格式及范文
2014/04/01 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
党支部综合考察意见
2015/06/01 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript