Vue-slot插槽

1.默认插槽

1.定义

​ 1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件

​ 2.使用场景:只需要最基本的往组件中插入html时，可以使用默认插槽

2.示例

理解:父组件在子组件的标签内编写代码，在子组件中使用slot标签即可接收

子组件

<div class="list">
    <h1>{{title}}</h1>
    <slot></slot>
  </div>

export default {
    data(){
      return{
         
      }
    },
    props:['title']
}

父组件

    <div class="container">
      <list title="游戏">
        <ul >
          <li v-for="(item,index) in dataList.games" :key="index">{{item}}</li>
        </ul>
      </list>

      <list title="汽车">
        <ul >
          <li v-for="(item,index) in dataList.cars" :key="index">{{item}}</li>
        </ul>
      </list>

      <list title="电影">
        <ul >
          <li v-for="(item,index) in dataList.films" :key="index">{{item}}</li>
        </ul>
      </list>
    </div>

import list from './components/list.vue'
export default ({
  name:'App',
  components:{list},
  data(){
    return{
      dataList:{
        games:['王者荣耀','穿越火线','洛克王国'],
        cars:['奔驰','奥迪','法拉利'],
        films:['海上钢琴师','肖申克的救赎','心灵捕手']
      }
    }
  },
  
})

2.具名插槽

1.定义

1.作用

2.使用场景:当组件中需要使用多个插槽时，可以使用具名插槽

2.示例

理解:我们需要在组件中加入多个插槽，可以在父组件中定义slot，并在子组件中通过name对应slot

子组件

 <div class="list">
    <h1>{{title}}</h1>
    <slot name="center"></slot>
    <slot name="footer"></slot>
  </div>

export default {
    data(){
      return{
      }
    },
    props:['title']
}

父组件

    <div class="container">
      <list title="游戏">
        <ul slot="center">
          <li v-for="(item,index) in dataList.games" :key="index">{{item}}</li>
        </ul>
        <a href="" slot="footer">更多游戏</a>
      </list>

      <list title="汽车">
        <ul slot="center">
          <li v-for="(item,index) in dataList.cars" :key="index">{{item}}</li>
        </ul>
        <a href="" slot="footer">更多汽车</a>
      </list>

      <list title="电影">
        <ul slot="center">
          <li v-for="(item,index) in dataList.films" :key="index">{{item}}</li>
        </ul>
        <a href="" slot="footer">更多电影</a>
      </list>
    </div>

import list from './components/list.vue'
export default ({
  name:'App',
  components:{list},
  data(){
    return{
      dataList:{
        games:['王者荣耀','穿越火线','洛克王国'],
        cars:['奔驰','奥迪','法拉利'],
        films:['海上钢琴师','肖申克的救赎','心灵捕手']
      }
    }
  },
  
})

3.作用域插槽

1.定义

​ 1.作用:可以从子组件拿到数据并且向子组件插入指定数据的html结构

​ 2.使用场景:数据存放在子组件，但是根据数据生成的结构需要由组件使用者决定，可以使用作用域插槽

2.示例

理解:

数据存放在子组件,但是我们需要根据不同的数据生成不同的结构。我们在子组件中slot中绑定list,父组件通过slot-scope或者scope接收list，接收时的参数名可以随意，此时接收的list是一个对象

比如下方示例中父组件接到的是

实际数据list的外层又被一层对象包裹,对象名为子组件中定义的属性名lists

父组件接到数据后，可以根据数据类型进行渲染，并通过slot指定插槽名，子组件通过name与父组件的插槽名对应

子组件:

<template>
  <div class="list">
    <slot :lists="list" name="games"></slot>
    <slot :lists="list" name="cars"></slot>
  </div>
</template>

export default {
    data(){
      return{
        list:{
          games:['王者荣耀','穿越火线','洛克王国'],
          cars:['奔驰','奥迪','法拉利'],
        }
         
      }
    },
    props:['title']
}

父组件：

<template>
    <div class="container">
      <list>
        <template slot-scope="games" slot="games">
          <ul>
            <li v-for="(item,index) in games.lists.games" :key="index">{{item}}</li>
          </ul>
        </template>
        <template slot-scope="cars" slot="cars">
           <ul>
            <li v-for="(item,index) in cars.lists.cars" :key="index">{{item}}</li>
          </ul>
        </template>
      </list>
    </div>
</template>