vue插槽slot的使用

vue的slot是子组件向父组件提供html自定义模版，具体做法是子组件中定义slot模版，然后在父组件中使用template去填充子组件的slot部分，子组件可以通过在slot上添加属性给父组件传递数据。

主要使用在拓展组件上，比如表格组件，让父组件可以自定义每一行的不同情况下的按钮，而子组件只需要关心一些通用的功能、布局和样式，业务逻辑部分在父组件处理，常用于一些vue的ui组件库。

具体写法可以参考例子，v-slot:slotName是vue2.6以上的写法，旧写法是slot=“slotName” slot-scope=“data”，在例子中可以看到父组件的template的位置与子组件中填充的位置没有关系，会固定按照子组件的slot位置进行渲染。

例子如下：父组件传递给子组件一个数组，然后子组件将每一个数组项传递回父组件。

<template>
  <div id="app">
    <cus-table :list="list">
      <template>默认slottemplate>
      <template>默认slot2template>

      <template v-slot:title>
        <p>具名slotp>
      template>

      <template v-slot:oprs="{item,index}">
        <button @click="addCount(item,index)">buttonbutton>
      template>
    cus-table>
  div>
template>

<script>
import CusTable from "./components/CusTable.vue";

export default {
      
  name: "App",
  components: {
      
    CusTable
  },
  data: () => {
      
    return {
      
      list: [
        {
      
          id: 0,
          content: 0
        },
        {
      
          id: 1,
          content: 0
        },
        {
      
          id: 2,
          content: 0
        },
        {
      
          id: 3,
          content: 0
        }
      ]
    };
  },
  methods: {
      
    addCount(item, index) {
      
      this.list[index].content += 1;
    }
  }
};
script>

<style>
#app {
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>

子组件CusTable：

<template>
  <div>
    <slot name="title">slot>
    <slot>slot>
    <ol>
      <li class="list-item" v-for="(item,index) in list" :key="item.id">
        <span class="item-content">{
    {item.content}}span>
        <slot name="oprs" :item="item" :index="index">slot>
      li>
    ol>
  div>
template>

<script>
export default {
      
  props: {
      
    list: {
      
      type: Array
    }
  }
};
script>

<style>
li {
      
  list-style: none;
}
.list-item:nth-child(odd) {
      
  background: #f1f1f1;
}
.item-content {
      
  display: inline-block;
  width: 100px;
}
style>

效果图：