美文网首页
通过实例学习Vue 2.6新增的v-slot

通过实例学习Vue 2.6新增的v-slot

作者: microkof | 来源:发表于2019-09-14 11:18 被阅读0次

    文档

    https://cn.vuejs.org/v2/guide/components-slots.html

    虽然Vue的文档大多数言之不详,但是这次插槽真的是把事情都说清楚了,我就不多说了。

    今天练习一个空状态组件的编写方法,为了简化代码,使用了vue-element-admin作为环境。

    空状态组件

    Empty组件编写

    • 代码非常简单,利用了flex布局。

    • 传入了一些字符串变量,以及一个函数。

    • 图标允许自定义,图标是从iconfont上下载的,由于vue-element-admin使用了svg自动编译(这个功能Element UI本身没有),所以传入图片名就可以得到一个svg图标。实在不懂可以看vue-element-admin的官方文档,或者跳过这个知识,因为本文主要说具名插槽。

    • 下面使用了2个具名插槽。

    <template>
      <div class="empty-container" :style="{ 'height': height }">
        <svg-icon :icon-class="iconName" class="empty-icon" />
        <p class="el-link el-link--default"><slot name="description">什么也没有</slot></p>
        <el-button v-if="clickButton" :type="buttonType" @click="clickButton"><slot name="button">确定</slot></el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Empty',
      props: {
        height: {
          type: String,
          default: '100%'
        },
        iconName: {
          type: String,
          default: 'empty'
        },
        buttonType: {
          type: String,
          default: 'primary'
        },
        clickButton: {
          type: Function,
          default: undefined
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .empty-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 200px;
      .empty-icon {
        font-size: 100px;
      }
    }
    </style>
    

    父组件编写

    template如下,其中#description#button就是具名插槽,当然这是缩写形式,全写形式是v-slot:descriptionv-slot:button

        <empty height="320px" :icon-name="iconName" :click-button="clickButton">
          <template #description>
            一行说明文字
          </template>
          <template #button>
            按钮文字
          </template>
        </empty>
    

    script如下,传入一些data和一个method。

      data() {
        return {
          iconName: 'empty',
          aaa: '1'
        }
      },
      methods: {
        clickButton() {
          alert(this.aaa)
        }
      }
    

    相关文章

      网友评论

          本文标题:通过实例学习Vue 2.6新增的v-slot

          本文链接:https://www.haomeiwen.com/subject/wbvmmftx.html