zoukankan      html  css  js  c++  java
  • Vue跨层级传递slot的方法

    因为业务需要,我们的vue组件分了很多层。但我需要在父组件通过slot指定模板,但不在子组件渲染,而是在孙组件或是再下方的组件去渲染。

    比如,我有一个通用的A组件,A组件内引用了B组件,B组件又引用了C组件。C组件的模板内有一部分是需要在A组件中来配置的。

    因为中间间隔了1层以上的组件,所以没法通过一般的slot方式解决。于是研究了一下vue的scoped-slots,感慨vue的设计真是很灵活,可以很方便实现。

    1、首先,引用A组件的模板:

    <div>
        ...
    <A>
    <span slot="nodeMenu" slot-scope="{node}">{{node.text}}</span>
    </A>
    ... </div>

    2.1、如果B组件是模板方式,引用B组件的模板:

    <div>
        ...
    <B>
    <span slot="nodeMenu" slot-scope="{node}"> <slot name="nodeMenu" :node="node"></slot> </span>
    </B>
    ... </div>

    2.2、如果B组件是通过render的脚本方式渲染的,可以这样:

    render(h){
        return h(ComponentC, {
            props: {
                ...
            },
            scopedSlots: self.$scopedSlots,
            on: {
               ...
            }
        })
    }

    3、C的模板:

    <div v-for="treeNode in nodes">
        ...
        <slot name="nodeMenu" :node="treeNode"></slot>
        ...
    </div>

    通过分析Vue源码,Vue的scopedSlots中是一个个渲染函数(并不是VNode)。在B组件中通过这些函数传递给C组件,从而实现了跨层传递slots。

  • 相关阅读:
    【学习笔记】查看CUDA版本
    如果Visual Studio太大,不妨还是用VSCode开发C#项目吧
    Visual Studio npm配置淘宝镜像
    c++读写锁--读者写者问题
    c++内存对象模型--vs2017下的分析,32位
    android作业
    android连接数据库
    android第十周(增删改查)
    android-购物车
    android计算器
  • 原文地址:https://www.cnblogs.com/hz-blog/p/vue-slots-transmit-through-levels.html
Copyright © 2011-2022 走看看