slot插槽及Element-ui 中＜template slot-scope=“scope“＞-Toy模板网

这篇具有很好参考价值的文章主要介绍了slot插槽及Element-ui 中＜template slot-scope=“scope“＞。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

slot插槽及Element-ui 中＜template slot-scope=“scope“＞

一源码展示

<el-table-column label="状态" align="center" prop="state">
        <template scope="scope">
          <div :style="{'color':scope.row.state==0? 'red':scope.row.state==1? 'orange':scope.row.state==2? 'green':'#333'}">
            {{scope.row.state|stateTrans}}
          </div>
        </template>
      </el-table-column>

slot-scope=“scope” //取到当前单元格
scope.$index //拿到当前行的index
scope.row //拿到当前行的数据对象
scope.row.date //是对象里面的data属性的值

二 slot插槽

插槽有三种：默认插槽、具名插槽、作用域插槽。

2.1 vue的slot默认插槽、具名插槽

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'children'
}
</script>

// 使用children组件
 <children>代替slot的内容</children>

<template>
  <div>
    代替slot的内容
  </div>
</template>

假如一个组件里面需要多个插槽。我们怎么来区分多个slot，而且不同slot的显示位置也是有差异的.对于这样的情况，元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
注意:一个不带 name 的出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，在元素上通过使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，将插槽内容放到指定位指:
多个插槽，每个需要<template 包裹

<children>
  <template v-slot:header>
  <!--  <template #header> 具名插槽可缩写形式 -->
    <h1>Here might be a page title</h1>
  </template>

注意:v-slot 只能添加在一个上 (只有一种例外情况)，这一点和已经废弃的 slot特性不同。
例外情况: 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

2.2作用域插槽

作用域插槽就是实现在子组件自行决定自己要显示什么内容

项目中，插槽的内容中有需要访问到子组件里面的内容，类似子组件里的slot可以绑定一些当前作用域，从而传出来，使用组件时，插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。
子组件：

<template>
  <div class="about">
    <h1>This is an 子组件</h1>
    <!-- 子组件中，告诉父组件我要实现obj里面的信息 -->
    //<slot :自定义的name=data中的属性或对象></slot>
    <slot :obj="obj"></slot>
     //动态绑定obj数据
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        name: 'children'

父组件：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children v-slot="slotProps">
        <p>one插槽{{slotProps.obj.name}}</p>
        //slotProps.obj.name子组件data中的数据
    </children>
  </div>
</template>
<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>

子组件有多个作用域插槽时（上边这种简单的写法，因为可能会出现作用域不明确的问题）：
子组件：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <slot :obj="obj1" name="one"></slot>
    <slot :obj="obj2" name="two"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'one slot'
      },
      obj2: {
        name: 'two slot'

父组件：
slotProps是当前插槽bind绑定的所有数据

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
        <template v-slot:one="slotProps">
       ***// slotProps是当前插槽bind绑定的所有数据***
          <h2>{{slotProps.obj1.name}}</h2>
        </template>
        <template v-slot:two="twoSlotProps">
          <h2>{{twoSlotProps.obj2.name}}</h2>
        </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {

2.3 动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
父组件：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
        <template v-slot:[dynamicSlotName]="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
      dynamicSlotName: 'one'

三 element-ui中的slot-scope

3.1 t基础的用法

代码参考一
基础的用法里面，在el-table中，:data="tableData"是数据集，结构如下：

 <el-table v-loading="loading" :data="gdglList" @selection-change="handleSelectionChange">
      <el-table-column align="center" label="序号"  type="index" width="50"></el-table-column>
      <el-table-column label="单号" align="center" prop="gdglId" v-if="true"/>
      <el-table-column label="委托部门" align="center" prop="deptName" />
      <el-table-column label="项目内容" align="center" prop="itemDescription" />

那么对于每一个el-table-column，我们只需要使用prop=“date”，就可以将该列的数据绑定为该数组所有的对象中的“date”属性，我们可以理解为对于tableData，这里始终取的是tableData[$index].date。
table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。

3.2 高级的用法

 <el-table v-loading="loading" :data="gdglList" @selection-change="handleSelectionChange">
      <el-table-column align="center" label="序号"  type="index" width="50"></el-table-column>
      <el-table-column label="单号" align="center" prop="gdglId" v-if="true"/>
      <el-table-column label="委托部门" align="center" prop="deptName" />
      <el-table-column label="项目内容" align="center" prop="itemDescription" />
      <el-table-column label="开始时间" align="center" prop="startDatetime" width="180">
             <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startDatetime, '{y}-{m}-{d}') }}</span>
              </template>
      </el-table-column>
      <el-table-column label="预计工时" align="center" prop="estimatedWorkingTime" />
      <el-table-column label="状态" align="center" prop="state">
        <template scope="scope">
					<div :style="{'color':scope.row.state==0? 'red':scope.row.state==1? 'orange':scope.row.state==2? 'green':'#333'}">
						{{scope.row.state|stateTrans}}
					</div>

				</template>
      </el-table-column>
      <el-table-column label="接单人" align="center" prop="projectReceivedBy" />
      <el-table-column label="结束时间" align="center" prop="endDatetime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDatetime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

template（模版）在这里属于一个固定用法：
我们主要说一下这个scope是个什么东西，按照element上的提示：
通过Scoped slot可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
我们可以理解为：tableData是给到table的记录集，scope是table内部基于tableData数据生成出来的数据集合（相似且有区别于整个数据）
scope.row.date，我们就可以读取到每一行中的date。文章来源地址https://www.toymoban.com/news/detail-781334.html

到了这里，关于slot插槽及Element-ui 中＜template slot-scope=“scope“＞的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！