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">。