vue做用域插槽的应用

问题场景：

　　存在一个列表,而后当鼠标放入列表中的名称上的时候,自动弹出简介,相似这种效果,

　　

咱们固然能够使用positon relative和absolute搭配达到这样的效果,可是如今有一个奇葩的问题,即名称那一列是overflow:hidden的(由于某些特殊缘由)，这个时候就不可能使用子元素的方式来达到悬浮的效果，这就只有一种实现方式，悬浮框单独作一个 定位未fixed,而后再鼠标放入名称上时候，监听鼠标位置，而后将悬浮框移动到置顶位置，而实现这个组件让我对vue的做用域插槽又有了一些理解：

组件下载:https://pan.baidu.com/s/1RNH7IbO_yCc1v_lNjoXuqQ

文件中含有两个文件,一个是组件，一个是指令，

使用方式:

　　1：引入组件和指令

　　2：绑定指令：

v-hover="{ref:$refs.popover1,data:scope.row.teaId}"

　　指令接收两个参数,ref表示咱们将要使用的组件的ref,data表示咱们显示悬浮框时候的数据，

　　3：使用组件

<zm-hover
            ref="popover1">
            <template  scope="props">
                <template v-if="!props.data">
                    <el-row style="text-align: center;color: black;line-height: 50px;">
                        <i class="el-icon-loading"></i>
                    </el-row>
                </template>
                <template v-else>
                  <el-row>
                    <el-col class="pd5" :span="12">性别:-----</el-col>
                    <el-col class="pd5" :span="12">学历:-----</el-col>
                  </el-row>
                  <el-row>
                    <el-col class="pd5" :span="12">毕业时间:-----</el-col>
                    <el-col class="pd5" :span="12">是否调剂:-----</el-col>
                  </el-row>
                </template>
               <!-- {{ !!props.data ? props.data.subject : '' }} -->
            </template>
        </zm-hover>

咱们能够看到zm-hover是咱们的组件，里面的html代码咱们能够任意组织,其中数据是经过peops.data从zm-hover组件中拿到的，咱们能够看看组件源码

<template>
    <transition name="fade">
        <div @mouseenter="Menter" @mouseleave="Mleave" class="zm-hover" v-bind:style="{ left: leftPX, top: topPX, bottom: bottomPX }" v-show="visible">
            <i :class="vertureP" class="triangleRight"></i>
            <i :class="vertureP" class="triangleRightBlock"></i>
            <slot :data="contentData"></slot>
        </div>
    </transition>
</template>

咱们再<slot>中传递数据给将要替换slot中的内容，因此这个地方我理解的是做用域插槽就是把数据传递给将来将要使用的组件中须要替换<slot>部分的内容，其中替换的html代码 经过props.data获取到数据，其中获取数据使用<template scope="props">。