2022-06-18 3 分钟 0.4 k0次访问

Vue插槽slot

插槽分两类，默认插槽和具名插槽。通俗理解就是默认插槽是没有名称的插槽，具名插槽是有名称的插槽。

默认插槽

父组件father

<template>
  <div>
    <h3>这是父组件</h3>
    <son>实践默认slot</son>
  </div>
</template>

子组件son

<template>
  <div>
    <h4>这是子组件</h4>
    <!--默认插槽slot是没有名称的-->
    <slot></slot>
  </div>
</template>

具名插槽

父组件father

<template>
  <div>
    <h3>这是父组件</h3>
    <son>
       <template slot="myslot">
          <div>实践具名slot</div>
       </template>
    </son>
  </div> 
</template>

子组件son

<template>
  <div>
    <h4>这是子组件</h4>
    <!--具名插槽slot有name属性的-->
    <slot name="myslot"></slot>
  </div>
</template>

作用域插槽

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

简单的说，就是父组件中不能直接用子组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。

父组件father

<template>
  <div>
    <h3>这是父组件</h3>
    <son>
      <template slot="myslot" slot-scope="slotProps">
        <ul>
          <li v-for="item in slotProps.data1">{{item}}</li>
        </ul>
      </template>
    </son>
  </div> 
</template>

子组件son

<template>
  <div>
    <h4>这是子组件</h4>
    <slot name="myslot" :data1='list'></slot>
  </div>
</template>
 
<script>
  export default {
    name:'Son',
    data(){
      return{
        list:[
          {name:"Tom",age:15},
          {name:"Jim",age:25},
          {name:"Tony",age:13}
        ]
      }
    }
  }
</script>

从子组件传过来的名为data1值为list的数据将会被slot-scope接收作为slotProps的一个属性，此时slotProps.data1就是list的值。

这样我们就可以在父组件中取到子组件的值，并且加以应用了。

使用插槽自定义表格列

scope.row相当于绑定数组中的一个{}，拿到当前行

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      label="地址">
        <template slot-scope="slotProps">
        	<span>{{ slotProps.row.address.city }}</span>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '王小虎',
          address: {city: '北京',village: '中关村'}
        }, {
          name: '王小虎',
          address: {city: '北京',village: '中关村'}
        }]
      }
    }
  }
</script>