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使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
原生js调用json方法总结
2018/02/22 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
python 爬虫请求模块requests详解
2020/12/04 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
先进员工事迹材料
2014/12/20 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
岗位聘任协议书
2015/09/21 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang