插槽——vue组件开发（四）

guoyp2126

已于 2022-02-18 13:09:40 修改

阅读量311

点赞数

分类专栏：前端开发技术文章标签： vue

于 2021-08-02 10:13:39 首次发布

本文链接：https://blog.csdn.net/guoyp2126/article/details/119116398

版权

前端开发技术专栏收录该内容

29 篇文章 4 订阅

订阅专栏

前言

插槽是组件式开发最常用的技术。所谓的插槽（slot）是组件中的一块HTML模板，这块模板显示不显示以及怎样显示由父组件来决定，但槽显示的位置确由子组件自身决定。slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。如：开发一个人员简历显示组件，显示的方式由子组件来决定，显示内容是由调用此组件的父组件决定。插槽分为匿名插槽、具名插槽和作用插槽三类

匿名插槽

匿名插槽就是不用设置name属性的插槽，父组件使用时无需指定名称即可获取指定的位置。如果子组件只有一个插槽，无需指定子组件插槽名称一个子组件只能有一个匿名插槽。
定义一个组件，预留一个插槽，示例如下：
子组件名称为v-slot

<template>  
   <div>  
     <p class="child">  
	    <h3>这里是子组件</h3>  
	    <slot></slot>  //预留一个插槽位置，无需给名称
     </p>  
    </div>  
</template>

父组件使用

<template>  
  <div>  
    <p class="father">  
      <h3>这里是父组件</h3>  
      <v-slot><h1>这是父组件的信息</h1></v-slot>
      //v-slot为子插槽实例名，<h1>为父组件中的html片段  
  </div>  
</template>

具名插槽

具名插槽是相对匿名插槽而言，插槽具有具体的名字。当一个子组件中有多个插槽时，就必须使用具名插槽，以便父组件确定插入html片段的位置。具名插槽可以在一个组件中出现多次，不同的名字决定不同的位置。子组件代码如下

<template>
  <div>
    <span>版权所有@</span>
    <slot name='company-name'></slot>
    <slot></slot>
      <slot name='internet-tandard-ublish-umber'></slot>
  </div>
</template>

<script>
export default {
  name: 'footer-slot'
}

这个组件有两个插槽，只有给定插槽的名字，父组件才知道具体html代码片段填到何处，父组件使用代码如下

<template>
  <div id="app">
    <name-slot>2012-2022
      <template v-solt:company-name>
        <span>宝鸡文理学院</span>
      </template>

      <template v-solt:internet-tandard-ublish-umber>
        <span>京公网安备 110023002002005号</span>
      </template>
    </name-slot>
  </div>
</template>

<script>
import nameSlot from './components/slot-name'
export default {
  name: 'App',
  components: {
    nameSlot
  }
}
</script>

父组件调用时，具名插槽使用语法为：v-slot：插槽名称，而且要跟template标签一起使用。

作用插槽

作用插槽也称带数据的插槽，使用作用插槽可以使用父组件定义的样式，显示子组件绑定的内容。在使用插槽时，父组件在插槽中需要使用到子组件中的数据，这时就需要使用到作用插槽。在子组件用绑定属性的方式传递数据，代码如下：

	<template>  
	  <div>  
	    <p class="child">  
	      <h3>这里是子组件</h3>  
	      <slot  name="up" :data="student"></slot>  //插槽中绑定一个子组件的数据
	    </p>  
	  </div>  
	</template>

 <script>  
  export default {  
    name: 'v-slot',  
    data() {  
      return {  
        student:{ name："张三",
                  age: 28 }  
      }  
    }  
  }  
</script>

父组件代码为：

<template>
  <div>
    <v-slot>
      <template slot-scope="item">{{item.name}}</template>
    </v-slot>
  </div>
</template>

这里使用slot-scope接收子组件传递的数据，item父组件变量，用于对子组件数据的接收。在作用插槽中父组件只关注样式，子组件提供数据。在Element UI Table 的 slot-scope的使用，在列表页面中Element UI Table是子组件，父组件通过props将数据传入后，Element UI Table将数据封装包含row、index等组件内部的数据，父组件需要获取这种子组件的数据，进行格式化操作，就需要使用slot-scope将数据接收。如：

      <el-table-column header-align="center" width="120" align="center" label="部门状态">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sflag=='1'" type="danger" size="mini" round @click="changeStatus(scope.row)">
          </el-button>
          <el-button v-if="scope.row.sflag=='0'" type="success" size="mini" round @click="changeStatus(scope.row)">
          </el-button>
        </template>
      </el-table-column>