Li RUONAN


一枚行走在前端道路上的程序媛 ~~


table component

项目中需要基于elementUI封装一个组件库,由于自己的开发水平有限,于是借助table组件去封装了一层,支持可配置的ui-table组件。后来在GitHub上看到类似的demo,就拿这个组件跟大家共同学习~

  1. 基于elementUI封装,那么element/table组件支持的功能都得支持
  • v-bind=”$attrs” 在创建高级组件时,vue支持通过$attrs将父组件的所有属性通过prop传过来
  • v-on=”$listeners” 创建高级组件时,vue支持通过$listeners将父组件的事件监听器传入子组件
    1
    2
    3
    4
    5
    <el-table class="egrid" ref="grid"
    :data="data"
    v-bind="$attrs"
    v-on="$listeners">
    </el-table>
  1. 通过插槽分发内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <el-table-column 
    v-if="tp.type === 'expand'"
    v-bind="tp.props"
    type="expand"
    :key="tp.type">
    <template slot-scope="props">
    <slot name="expand" v-bind="props"></slot>
    </template>
    </el-table-column>
  • 先讲讲插槽的使用~~

    1. <slot>作为承载内容分发的出口,也就是需要渲染的子组件与父组件之间,通过slot标签识别。通过name属性,可以访问特定的插槽;同时,在 template 元素上使用 v-slot 指令,可以通过参数的形式提供名称。例如:
      1
      2
      3
      4
      <slot name="header"></slot>
      <template v-slot:header>
      <h1>Here might be a page title</h1>
      </template>
  • 那么接下来就是编译绑定作用域问题了~~

    1. 既然父子组件需要交互,势必要有数据传递,然而父级模板里的所有内容都在父级作用域中编译;子模板里的所有内容都在子作用域中编译。因此slot、slotProps、slot-scope的使用,都是为将绑定的属性传给插槽作用域,使得能够在父级渲染。
    • 虽然 slot-scope 已废除,但设计思想是差不多的。这里按照最新语法分析:通过<slot v-bind:prop="props">,v-slot:default="slotProps",将props通过v-bind:prop绑定到父组件的prop属性,通过定义v-slot:default=”slotProps”定义了父组件的作用域slotProps。这样可以通过父级作用域读取插槽传过来的数据。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <slot v-bind:prop="props">{{ prop.title }}</slot>
      ## 默认插槽情况
      <template v-slot="slotProps">
      {{ slotProps.prop.id }}
      </template>
      ## 多个插槽情况
      <template v-slot:default="slotProps">
      {{ slotProps.user.firstName }}
      </template>
      <template v-slot:other="otherSlotProps">
      ...
      </template>

    特此说明: v-slot 切记勿将具名 v-slot:header 及作用域插槽 v-slot:header=”slotProps” 混淆。

  1. 动态组件
    1
    2
    3
    <component :is="col.component"
    v-bind="getCptBind(scope, col)"
    v-on="col.listeners">
  • 做tab组件切换的时候,经常需要渲染不同的详情组件。这个时候最需要用到的就是动态组件<component :is="col.component"></component>。demo中是每次for循环,传入不同对象的属性compnent,存储各自的组件,实现个性化渲染组件效果。我们可以看到,又一次通过 v-bind:$attrs,v-on=”$listeners’ 绑定父级组件的属性和方法。
    文档中有个地方还需要注意,那就是组件缓存问题,是否需要存活。具体看产品设计需求具体分析:
    1
    2
    3
    4
    <!-- 失活的组件将会被缓存!-->
    <keep-alive>
    <component v-bind:is="currentTabComponent"></component>
    </keep-alive>

回顾了自己曾经封装组件的过程,不禁意识到 vue 一直在不断地更新。实际上,自己对于 vue 真是一点儿都不熟悉,这么多强大的属性、方法、事件、还有全局指令、全局组件功能。真是需要沉下来,认真阅读文档多多尝试实践!
VueConf 2019 关注 vue3.0 新特性~ 加油(๑•̀ㅂ•́)و✧加油