VUE插槽的使用

目录

定义/使用场景：

插槽的类别

具体实现

定义/使用场景：

1. 定义：插槽通过父组件在调用子组件的时候去定义插槽内容，然后子组件通过slot接收父组件的插槽来显示出来
2. 使用场景：譬如五个页面可能只有一个地方不一样，其他地方都是一致的，那么就可以定义一个父组件为母版，通过定义插槽来表示不一致的地方。

插槽的类别

1. 匿名插槽：<slot></slot>：没有名字，名字默认是
2. 具名插槽：<slot name=top></slot>：有名字的插槽，一般有多个插槽的时候使用。
3. 作用域插槽：<slot title='标题' :num=count></slot>：由于子组件中的数据只能子组件才能访问到，插槽又是定义在父组件中，如果定义的时候就需要用到子组件的数据，那么则需要通过作用域插槽来连通彼此的关系。

具体实现

1.匿名插槽具体实现：

//子组件
<template>
  <div class="hello">
     Helloworld组件
     <div class = 'slotTxt'>
       // 匿名插槽
       <slot></slot>
     </div>
  </div>
</template>

  
//父组件
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      //如果没有插槽，这里的内容不显示
      <h1>我是子组件中的插槽啊</h1>  
    </HelloWorld>
  </div>
</template>

效果图：

2.具名插槽具体实现

注意：v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

//子组件 分别有两个slot
<template>
  <div class="hello">
     Helloworld组件
     <div class = 'slotLeft'>
       <slot name='left'></slot>
     </div>
     <div class = 'slotRight'>
       <slot name='right'></slot>
     </div>
  </div>
</template>

//父组件  通过template标签v-slot属性来定义两个插槽
//注意：v-slot属性只能添加在template标签上，有一个情况例外如下下面一个父组件
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template v-slot:left>
         <h1>name属性为left</h1> 
      </template>
      <template v-slot:right>
         <h1>name属性为right</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

//自带slot属性的具名插槽在vue3.0中已经被废弃，用法如下，
//所以还是使用template标签+v-slot属性更好
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <h1 slot='left'>name属性为left</h1>  
      <h1 slot='right'>name属性为right</h1>  
    </HelloWorld>
  </div>
</template>

效果图：

3.作用域插槽具体实现

<!--父组件内容-->
<template>
  <div class="container">
    <Category title="游戏">
       <!--需要包裹一个template标签（必须），通过scope获取slot传递数据--> 
      <template scope="{ info }">
        <ul>
          <li v-for="(item, index) in info.games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>
 
<!--子组件内容-->
<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
     <!--通过slot传递数据info--> 
    <slot :info="info">test </slot>
  </div>
</template>