Vue之插槽(slot)

青旅半醒 2022-04-18 01:53 285阅读 0赞

**slot**：向组件内部指定位置传递内容

*  单个插槽（匿名插槽）

在App.vue引入子组件About.vue,在about标签加上一个div标签传递到子组件中：  
App.vue

<template>
      <div id="root">
        <about>
          <div>hello world!</div>
        </about>
      </div>
    </template>
    
    <script>
    import About from "./views/About.vue"
    export default {
      components:{
        About
      },
    </script>

About.vue通过slot标签获取父组件传递过来的div标签：

<template>
      <div class="about">
        这是about组件
        <slot></slot>
      </div>
    </template>

*  多个插槽（具名插槽）  
    App.vue

<template>
      <div id="root">
        <about>
          <div slot="t1">hello world!</div>
          <div slot="t2">hello I!</div>
          <div slot="t3">hello You!</div>
        </about>
      </div>
    </template>

About.vue

<template>
      <div class="about">
        这是about组件
        <slot name="t1"></slot>
        <slot name="t2"></slot>
        <slot name="t3"></slot>
      </div>
    </template>

*  作用域插槽

子组件提供数据，父组件调用子组件，提供样式排版  
App.vue

<template>
      <div id="root">
        
        <about>
          <template slot-scope="scores">
            <ul class="about1">
              <li v-for="item in scores.list" :key="item">{
       {item.name}}: {
       {item.score}}</li>
            </ul>
          </template>
        </about>
        
        <about>
          <template slot-scope="scores">
            <span class="about2" v-for="item in scores.list" :key="item">
              {
       {item.name}}: {
       {item.score}}
            </span>
          </template>
        </about>
    
      </div>
    </template>
    
    <script>
    import About from "./views/About.vue"
    export default {
      components:{
        About
      },
    }
    </script>
    
    <style lang="less">
    .about1,.about1 li{
      list-style: none;
    }
    .about1 li{
      line-height: 40px;
      border-bottom: 1px solid #999
    }
    .about2{
      display: inline-block;
      margin-right: 10px;
      color: red
    }
    .about2:after{
      content: '/';
      padding-left: 10px;
    }
    </style>

About.vue

<template>
      <div class="about">
        这是about组件
        <slot :list="list"></slot>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          list:[
            {
              name :'jack',
              score : 80
            },
            {
              name :'alice',
              score : 90
            },
            {
              name :'kate',
              score : 100
            }
          ]
        }
      },
    }
    </script>