vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用

<template>
  <el-table :data="tableData">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="年龄">
      <!-- 支持直接通过 {} 去解构数据 -->
      <template slot-scope="{row}">
        <span>{{ row.age }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<div class="son">
  <h3>我是子组件</h3>
  <slot>我是默认内容，如果爸爸你不给我传东西我就显示这里的内容</slot>
</div>
<script>
  export default {
    name: 'Child'
  }
</script>
父组件：
<div class="father">
  <h3>我是父组件</h3>
  <Child>
    <p>儿子，我是爸爸给你传的内容</p>
  </Child>
</div>
<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

<div class="son">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot name="main"></slot>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
<script>
  export default {
    name: 'Child'
  }
</script>

<div class="father">
  <h3>我是父组件</h3>
  <Child>
    <template slot="header">
      <h1>我是 header</h1>
    </template>

    <template v-slot:main>
      <p>我是 main</p>
    </template>

    <template v-slot:default>
      <p>A paragraph for the main content.</p>
    </template>

    <template #footer>
      <p>我是 footer</p>
    </template>
  </Child>
</div>
<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

可以直接通过 slot="xx" 去找到子组件中自己占位符，不过推荐用最新的 v-solt 指令，而且还可以通过 # 进一步来简写，就相当与 @ 代替 v-on，冒号 : 代替 v-bind 一样。没有名字的默认插槽可以通过 slot="default" 或者 v-slot:default 去找到自己的位置，或者啥也不写 Child 标签中只要没有被其他 slot 包裹的内容都是默认插槽的。

<div class="son">
  <h3>我是子组件</h3>
  <slot :user="user"></slot>
</div>
<script>
  export default {
    name: 'Child',
    data() {
      return {
        user: {
          name: 'zhou',
          age: 18
        }
      }
    }
  }
</script>

<div class="father">
  <h3>我是父组件</h3>
  <!-- 旧语法，2.6 之后不推荐使用了-->
  <Child>
    <template slot-scope="scope">
      <p>姓名：{{ scope.user.name }}</p>
      <p>年龄：{{ scope.user.age }}</p>
    </template>
  </Child>

  <!-- 新语法-->
  <Child>
    <template v-slot="scope">
      <p>姓名：{{ scope.user.name }}</p>
      <p>年龄：{{ scope.user.age }}</p>
    </template>
  </Child>
</div>
<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

<div class="son">
  <el-table :data="tableData">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="$slots.action" label="操作">
      <template slot-scope="{row}">
        <slot name="action" :row="row" />
      </template>
    </el-table-column>
  </el-table>
</div>
<script>
  export default {
    name: 'Child',
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

<div class="father">
  <h3>我是父组件</h3>
  <Child>
    <template slot="action" slot-scope="{ row }">
      <span @click="handleEdit(row)">编辑</span>
    </template>
  </Child>
</div>
<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    },
    methods: {
      handleEdit(row) {
        console.log(row)
      }
    }
  }
</script>