使用Vue插槽模板

作用域插槽使用模板：

父组件：

<template>
  <div class="mainFlex">
    <Main>
<!--      slotProps身上有子组件传来的多个值，是对象形式-->
<!--      格式：v-slot：插槽名 = “接收数值”-->
<!--      插槽显示内容需要用template标签包裹    -->
      <template  v-slot:mainSlot="slotProps">
        <ul>
          <li v-for="(item,index) in slotProps.game" :key="index" >{{item}}</li>
        </ul>
      </template>

      <template v-slot:footerSlot>
        <ul>
          <li v-for="(item,index) in city.city" :key="index" >{{item}}</li>
        </ul>
      </template>
    </Main>

    <Main>
      <template v-slot:mainSlot>
        <ul>
          <li v-for="(item,index) in city" :key="index" >{{item}}</li>
        </ul>
      </template>
    </Main>

    <Main>
      <template v-slot:footerSlot>
        <ul>
          <li v-for="(item,index) in game" :key="index" >{{item}}</li>
        </ul>
      </template>
    </Main>

  </div>
</template>

<script>


import Main from "./components/Main";
export default {
  name: 'App',
  components: {
    Main
  },
  data(){
    return{
      game:['cs','cf','lol','qq'],
      city:['Beijing','Shanghai','Shenyang','Jinan']
    }
  }
}
</script>

<style>
.mainFlex{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

}
</style>

子组件：

<template>
    <div class="main">
        <slot :game="game"  name="mainSlot">当使用者没有传递具体结构，显示这些文字内容</slot>
        <slot :city="city" name="footerSlot">footerSlot插槽意外出错，请联系开发人员！</slot>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data(){
            return{
                game:['cs','cf','lol','qq'],
                city:['Beijing','Shanghai','Shenyang','Jinan']
            }
        }
    }
</script>

<style scoped>

    .main{
        background-color: gold;
    }


</style>

显示效果图：