Vue 组件开发实践之 scopedSlot 的传递

导语

现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效。在使用Vue开发我们的vhtml-ui的组件库的过程中遇到了组件嵌套组件时需要传递scopedSlot的情况,官方的文档和教程目前还没有比较明确的指引,所以摸着石头过河,调通了想要的效果。记录下来方便大家和自己。

在Vue中,为了让组件可以组合,我们使用Slot来混合父组件的内容与子组件自己的模板。这样就实现了Vue的内容分发。

Scoped Slot(作用域插槽)是在Vue 2.1引入的更进阶的功能,它是一种特殊类型的slot,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。我的理解就是使用scoped slot能在插槽里自定义模板并且使用组件传递过来的context。这大大提高了组件开发的灵活性。

Select组件一期

在开发我们的select组件时很自然就用上了scoped slot这一特性。我们需要遍历数据中的选项数组,渲染成界面上的下拉选项列表。如果是比较复杂的允许自定义的list item,在组件里写死dom结构就行不通了,比如:

有了scoped slot实现很轻松:


    <v-select kind="popup" :options="options4">
        <template slot="listItem" scope="props">
            <div>
                <div><span>{{ props.item.text }}<span> | <span>{{ props.item.value }}<span></div><div>{{ props.item.area }}</div>
                <div>{{ props.item.url }}</div>
            </div>
        </template>
    </v-select>

很好,非常好,现在有一个新需求:这个列表有的时候想要脱离select使用,比如就直接展示在页面上,不需要通过下拉弹出。

select-list组件

这好办啊,作为组件开发的老司机们自然能想到把这个list独立做成一个组件,页面可以直接调用,select组件也可以在它之上再封装一层。

完美!

开干!

select-list template结构示意:

    <ul class="v-select-list">
        <li class="v-select-list__item" v-for="(item, index) in options">
            <slot name="listItem" :item="item">
                <span>{{ item.text }}</span>
            </slot>
        </li>
    </ul>

select template结构示意:

    <div class="v-select">
        <v-popper>
            <v-select-list>
                <slot name="listItem">
                </slot>
            </v-select-list>
        </v-popper>
    </div>

然后问题来了,最里层的select-list组件并没有接收到用户自定义的scoped slot。通过查找Vue官方文档以及谷歌,也没有找到使用template方式传递scoped slot的介绍和例子。

Render函数和JSX

人总不能让尿给憋死,一条路走不通我们就看看有没有其他办法。在Vue的官方文档上有这么一句话:

“ Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。”

查看文档,通过render函数确实能够传递scoped slot,以下图的方式

把scoped slot作为createElement方法的第二参数(data object)的一个属性传递到子组件中。

但是render函数的缺点就是不灵活,特别是在定义你的组件的dom结构模板的时候,如果写很多 render 函数,可能会觉得痛苦。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况。

还好我们还有最后一把杀手锏--JSX。它可以让我们回到于更接近模板的语法上。具体关于JSX的使用不是本文的主题,我们可以阅读使用文档 ,学习关于 JSX 映射到 JavaScript的用法。

JSX实现上文的嵌套例子

通过参阅文档及不断地摸索,最终实现了自己想要的功能。我们直接上关键代码(select的render函数),看看有什么奥秘:

render(h) {
        let directives = [{
            name: 'popper',
            arg: 'selector',
            modifiers: { click: true }
        }];

        return (
            <div
                class={{ 'v-select': true, 'is-open': this.isPopperShown, 'is-disabled': this.disabled }}>
                <v-popper
                    ref="selector"
                    placement="bottom-start"
                    onVisibleChange={this.togglePopper}>
                    <v-select-list
                        class="v-select__options"
                        onChange={this.handleChange}
                        multiple={this.multiple}
                        value={this.currentValue}
                        onInput={this.handleListInput}
                        scopedSlots={{listItem: this.$scopedSlots.listItem}} >
                    </v-select-list>
                </v-popper>
                <div
                    class="v-select__header"
                    { ...{directives} }>
                    {
                        this.currentIndex !== -1 && this.$scopedSlots.headItem ? this.$scopedSlots.headItem(this.current)
                            : (<span>{this.currentText}</span>)
                    }
                    <v-icon
                        class="v-select__header-arrow"
                        name="v-arrow_dropdown">
                    </v-icon>
                </div>
            </div>
        )
    }

关键点:

  • 在子组件的标签上通过scopedSlots 属性可以向其传递自己的scoped slot;
  • 自身的scoped slot可以通过this.$scopedSlots 对象获取,默认就是default,具名slot就是它的名字。本例为“listItem”;
  • 如果不在标签上传递而是需要使用表达式传递,也可以通过 this.$scopedSlots对象。并且一个具体的scoped slot对象其实就是一个函数,其内部的scope可以在参数中传入。比如本例中的this.$scopedSlots.headItem(this.current)

JSX中对template常用点的转换

上面的介绍涵盖了基本的用法,但是我们在组件中往往会用一些不基本但常用的vue特性。我们接下来一起看看。

细心地小伙伴可能发现了上面的代码中已经出现了这些用法

directives

如果我们在组件中使用了directives,那么jsx里就不能想之前在template里那么自然的书写

v-popper:third.click

而是需要workaround:

  1. Pass everything as an object via value, e.g. v-name={{ value, modifier: true }}
  2. Use the raw vnode directive data format:

上面的例子中就是用了方法二。

v-model

render函数(JSX也是写在render函数中)中没有与v-model相应的api - 你必须自己来实现相应的逻辑。即通过value属性传递值,并通过绑定input事件来响应变化。

没有template 中的v-ifv-for:

这意味着我们需要在render函数或者JSX的表达式中手写if-else逻辑判断。或者如本例中使用三目表达式来实现。

这就是深入底层要付出的,尽管麻烦了一些,但你可以更灵活地控制。

希望这边文章能让我们在开发Vue组件的时候少走一些弯路,如果有大神有更好的办法或直接在template中实现传递scoped slot的功能,请多多指教!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

见到了“公司”定义一个Company类,那么见到了“字段”是不是也可定义一个Column类?

  既然见到了公司,我们可以定义一个Class Company ,那么我们见到了字段,是不是也可以定义一个Class ColumnInfo呢? 公司的描述信息类...

2409
来自专栏Python爬虫与数据挖掘

Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结

前几天小编连续写了四篇关于Python选择器的文章,分别用正则表达式、BeautifulSoup、Xpath、CSS选择器分别抓取京东网的商品信...

1001
来自专栏Flutter&Dart

Flutter之MaterialApp使用详解

5582
来自专栏ytkah

整理的dedecms标签大全,方便查找

  平时用dedecms开发经常会用到一些标签,特别是首页、栏目页、内容页,这些页面都会用到标签的调用,比如title、keywords、description...

2695
来自专栏智能大石头

ARM非对齐操作异常解决过程

在测试MF固件时,发生一个非常诡异的异常,代码如下: CLR_DBG_Commands::Monitor_EraseMemory* cmd = (CLR...

2159
来自专栏salesforce零基础学习

salesforce 零基础学习(四十四)实现checkbox列表简单过滤功能

现在做的项目代码是原来其他公司做的,要在原来基础上业务进行适当调整加上一些CR,其中有一个需要调整的需求如下: 原来使用apex:selectCheckboxe...

21910
来自专栏林德熙的博客

win10 uwp ContentDialog 点确定不关闭

微软的ContentDialog不是一直有,而是UWP新的,可以使用Content放用户控件,使用很好,但是一点不好的是,默认的一点击下面按钮就会退出。

952
来自专栏互联网杂技

干货:前端开发指南Front-End-Develop-Guide

这份文件包含一系列用于面试审查求职者(候选人)的前端面试问题。这并不推荐把每个问题都问在同一个求职者(因为这会花几个小时的时间)。从列表中抽取一些问题能够帮助你...

3496
来自专栏iKcamp

React 深入系列5:事件处理

1613
来自专栏IMWeb前端团队

组件化开发--实践记录与总结

组件的规范可在组件实现时通过代码风格和格式来约束,也可通过基类扩展来强制规范。所以,当组件都是通过同一个基类扩展而来时,在那个基类上就可以很方便地统一组件规范,...

2477

扫码关注云+社区