<template slot-scope="scope"> 插槽 <div slot="reference"></div>

个人理解插槽区别

 <template slot-scope="scope"> 在vue项目里面可以用,拿到的当面行后台返回的所有数据

例如:

<el-table-column fixed="right" label="操作" width="120">

   <template slot-scope="scope">

     <div> {{scope.row}} </div>  //可以拿到当前行,所有后台返回的数据

  </template>

</el-table-column>

 <div slot="reference"></div>  前端用页面的一部分替换页面的另一部分

  例如:

 <td  width=35%>
                <div v-if="item.ext=='png' || item.ext=='jpg'"> 
                          <el-popover
                              placement="right"
                              width="400"
                              trigger="click">
                              <img :src="item.url"/>  //替换项
                               <div slot="reference">
                                  <img  :src="item.url" style="100px;height:50px; cursor:pointer" />   //被替换
                               </div>                 
                        </el-popover>
                </div>
                <div v-else><a :href=item.url download="">{{item.fileName}}</a></div>
 </td>

 

原文地址:https://www.cnblogs.com/maibao666/p/12971391.html