vue中slot的使用

2021-12-09 10:30:02 阅读：166 来源： 互联网

标签：slot head vue name 插槽使用 scope data

在使用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中。

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

</template>

标签：slot,head,vue,name,插槽,使用,scope,data
来源： https://blog.csdn.net/baidu_41601048/article/details/121806165

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue中slot的使用