vue-插槽简单概述

一、概述

1.作用

     让父组件可以向子组件位置插入模板片段，也是一种组件间通信的方式，适用于父组件--->子组件

2.分类

    默认插槽，具名插槽，作用域插槽

二、各类插槽的使用方法

    假设父组件是App,子组件是category

   插槽的内容不局限，可以是单个的文本，可以是整个的html片段，也可以是整个的组件，当然也可以同时传入多个元素

插槽的内容可以访问父组件中的数据，但无法访问子组件中的数据（作用域插槽除外）

1.默认插槽

    默认插槽就通俗来说就是一个萝卜一个坑，在组件中挖好一个坑<slot></slot>,然后等着这个组件的使用者（父组件）将html结构当作萝卜填进去

父组件中：

<子组件标签名>

.......向子组件中插入的html模板片段

</子组件标签名>

<category>
   html结构
 </category>

子组件中：

 <template>
    <包裹容器>
     <slot>插槽默认内容</slot> 
    </包裹容器>
 </template>

2.具名插槽

    在默认插槽的基础上，给子组件中的每一个插槽取了一个名字，当传入多个元素的时候，可以一个萝卜一个坑的种下去

父组件传递 ，一个片段使用一组template包裹 

如果不设置插槽名，则默认使用默认插槽

<template #插槽名>

片段

</template>

 v-slot:插槽名，简写#插槽名

 子组件接收

<外层包裹容器>

<slot name="插槽名">默认内容</slot>

</外层包裹容器>

父组件中：

   第一种方法：适用于html结构复杂的
     <category >
        <template v-slot:插槽名> 
            <div>html结构</div>
        </temlate>
      </category>

   
   第二种方法：适用于html结构简单的
   <标签名 slot="插槽名" ></标签名>

子组件中：

 <template>
      <div>
         <slot name="插槽名">默认内容</slot>
      </div>
 </template>

3.作用域插槽

   开头说插槽内的内容无法访问子组件内的数据，但是作用域插槽可以，其实与props传递数据类似，在子组件中使用类似props传递数据的方式，向上(父组件)传递数据，,父组件在子组件上使用v-slot指令接收或者template中scope接收

这样就能使插槽既能访问子组件也能访问父组件了

（子组件用v-bind传递数据，父组件用scope={数据名}接收数据

父组件

<template scope="{games}">
    <div>
      html结构
    </div>
 </template>
 <template scope="{games}">
    <div>
      html结构2
     </div>
 </template>
 ......
scope="{games}"也可以替换成 scope="自己取的名字"，但是games在你取的名字里，若要遍历的话，写 -- 名字.games进行遍历

子组件

 <template>
     <slot :games="games">默认内容</slot>
  </template>
  <script>
     export default{
       data(){
         return{
           games:['王者','蛋仔','超级玛丽','穿越'],
           }
        }
    }