slot、slot-scope与v-slot替换

「slot、slot-scope与v-slot替换 」

​ slot、slot-scope已经被弃用，所以推荐使用v-slot进行替换

      // slot-scope 弃用写法
       <el-table-column label="状态" prop="mg_state">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state">
            </el-switch>
          </template>
        </el-table-column>
        
        // v-slot写法
           <template v-slot:default="scope">
            <el-switch v-model="scope.row.mg_state">
            </el-switch>
          </template>

<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
  
  // 现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

// user 是 current-user组件内部才能访问到的，所以为了让 user 在 current-user 的父级还能访问到，可以将user作为 <slot> 元素的一个 attribute 绑定上去
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

**scope.row 就是指当前行的数据** --element-ui