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项目实现主题切换的多种方法
Nov 26 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue里使用create, mounted调用方法
Apr 26 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Opacity.js
2007/01/22 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
实例代码讲解Python 线程池
2020/08/24 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
企业治理工作自我评价
2013/09/26 职场文书
语文复习计划
2015/01/19 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
信用卡催款律师函
2015/05/27 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书