在使用element-ui的table进行自定义渲染的时候。经常会看到这样的写法：

  <el-table
    :data="tableData"
>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

注意这里的slot-scope="scope"，<template slot-scope="scope"></template >，我们只是给table传入一个数据。那他是怎么最后渲染在了table的行和列中的？

其实这就是用到了vue的作用域插槽。它能把子组件插槽的数据，在父组件中展示。

我们先聊一聊vue作用域插槽的具体用法：

（1）具名插槽：

//父组件
<template>
    <div>
        <Dcomp >
          <template #head>
               这里可以自定义head中的内容      
           </template>
           <template #body>
                  这里可以自定义body中的内容
           </template>
           <template #foot>
                这里可以自定义foot中的内容
           </template>
        </Dcomp >
    </div>
</template>
<script>
import Dcomp from "@/components/d"
export default{
    name:"" ,
    components:{Dcomp},   
    
}

</script>

//插槽组件
<template>
    <div>
        <div>
               <slot class="head" name="head" >我是默认head</slot>
        </div>
        <div>
            <slot class="body" name="body" >我是默认body</slot>
        </div>
        <div>
            <slot class="body" name="footer" >我是默认footer</slot>
        </div>


    </div>
</template>

在插槽组件中通过给slot标签添加name来对应具体的内容。这样父组件Dcomp中就默认暂时分别展示slot的内容。而如果父组件中自定义了内容，则会替换掉slot中的默认的内容

（2）作用域插槽

想想element-ui中table组件自定义内容时，通过scope.row.name就能获取到当前name的值

 <template slot-scope="scope">
        <span>{{scope.row.name}}</span>
 </template>

而name的具体数据明显是在插槽中的。这就是作用域插槽的具体应用。

还是通过上面的例子。来看看如何实现。

//父组件
<template>
    <div>
        <Dcomp >
               <template v-slot:head="scope">
                  <h2> head---</h2>
                  <div class="err">{{scope.data.name}}</div>
              </template>
               <template v-slot:body="scope">
                  <h2> body---</h2>
                  <div class="err">{{scope.data.name}}</div>
              </template>
                <template v-slot:foot="scope">
                  <h2> footer---</h2>
                 <div class="err">{{scope.data.name}}</div>
              </template>
        </Dcomp >
     // v-slot可以简写成#,等价于以下写法
      <!--  <Dcomp >
               <template #head="scope">
                  <h2> head---</h2>
                  <div class="err">{{scope.data.name}}</div>
              </template>
               <template #body="scope">
                  <h2> body---</h2>
                  <div class="err">{{scope.data.name}}</div>
              </template>
                <template #foot="scope">
                  <h2> footer---</h2>
                 <div class="err">{{scope.data.name}}</div>
              </template>
        </Dcomp >    
        <--!>
    </div>
</template>
<script>
import Dcomp from "@/components/d"
export default{
    name:"" ,
    components:{Dcomp},   
}

</script>

//插槽组件
<template>
    <div>
        <div>
            <slot class="head" name="head" :data="itemData.head">
                {{itemData.head.gender}}
            </slot>
        </div>
        <div>
            <slot class="body" name="body" :data="itemData.body">
                {{itemData.body.gender}}
            </slot>
        </div>
        <div>
            <slot class="foot" name="foot" :data="itemData.footer">
                {{itemData.footer.gender}}
            </slot>
        </div>
    </div>
</template>
<script>

export default{

    name:"slotcomp",
    data() {
        return {
            itemData:{
                head:{
                    name:"head",
                    age:32,
                    gender:"male"
                },
                body:{
                    name:"body",
                    age:24,
                    gender:"formale"
                },
                footer:{
                    name:"footer",
                    age:34,
                    gender:"male"
                }
            
            },
        };
    },

}



</script>

最后页面效果展示如下：

（1） 注意这里名称的对应关系:在slot中我们给head、body、footer分别绑定了一个data，那在父组件中自定义内容获取数据的时候。scope其实就是我们绑定的data：

（2）v-slot的书写规则是 v-slot:(slot对应的名称，比如这里的head。body，foot)=“scope“,这里的scope就是在solt组件中绑定的数据名称，比如上面实例中的data。

（3） v-slot:(slotname)="slot-data" 只能卸载template中。

 <template v-slot:head="scope">

                  <h2> head---</h2>

                  <div class="err">{{scope.data}}</div>

  </template>