理解vue中的slot-scope与scope.row

slot-scope 是vue2中的作用域插槽

在父组件 <template> 上使用特殊的 slot-scope attribute，可以接收子组件传递给插槽的 prop

父组件：

<template>
  <div class="father">
    <h3>这里是父组件</h3>

    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>
    </child>
  </div>
</template>

子组件：

<template>
  <div class="child">

    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot :data="data"></slot>
  </div>
</template>

<script>
 export default {
    data: function() {
      return {
        data: ['john','lisa','amy','mike']
      }
    }
}
</script>

使用vue中的ele-ui组件的时候，我们经常使用template插槽，slot-scope可以获取当前所在元素的数据

<el-table :data="computeData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope"> // 此处获取点击的该行的数据
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
</el-table>

scope.row 中存储着该行的数据：

🔥🔥🔥更多知识，欢迎访问我的个人博客：Nan-ying's Blog