vue 插槽 slot （匿名 / 具名 / 作用域插槽）

• vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。
• 该模板是否显示，以及如何显示由其父组件说了算。
• 插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块

1. 匿名插槽

• 不用设置名字 name ，所以叫匿名插槽
• 将 子组件元素包裹的数据传递给子元素
• 又叫 默认插槽

// 父组件----------------------------------------------------
<template>
  <div id="app">
        <Child>     //使用子组件包裹，这就是传递到 子组件的 html ⬅⬅⬅⬅
          <h3>这里是 父组件</h3>
          <h3>这是父组件的内容分</h3>
        </Child>    //使用子组件包裹，这就是传递到 子组件的 html ⬅⬅⬅⬅
  </div>
</template>

// 子组件----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
        <slot></slot>   //传递过来的参数在这里展示
    </div>
</template>

//执行过后就会变成这样----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
         <h3>这里是 父组件</h3>       //⬅⬅⬅⬅⬅⬅
         <h3>这是父组件的内容分</h3>  //⬅⬅⬅⬅⬅⬅
    </div>
</template>

2. 具名插槽

• 给插槽加上name属性，我们可以将其称为具名插槽
• 将对应名字的 html 渲染到 slot name 对应的到相应位置

// 父组件----------------------------------------------------
<template>
  <div id="app">
        <Child>
            <h3 slot="zhang">张三 --- 父组件</h3>
            <h3 slot="li">李四 --- 父组件</h3>
        </Child>
  </div>
</template>

// 子组件----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
        <slot name="zhang"></slot>   //将 名字为 zhang 的渲染到此处
        <slot name="li"></slot>      //将 名字为 li    的渲染到此处
    </div>
</template>

//执行过后就会变成这样----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
            <h3>张三 --- 父组件</h3>
            <h3>李四 --- 父组件</h3>
    </div>
</template>

如果去掉 为 li 的插槽：

3. 作用域插槽

• 作用域插槽是要在slot上面绑定数据，所以也称作用域插槽为带数据插槽
  1. 可以使用 slot-scope="item" 来使用子元素的数据
  2. 也可以使用 父组件的数据

• 1. 使用 slot-scope="item" 来使用子元素的数据

// 父组件----------------------------------------------------
<template>
  <div id="app">
        <Child>
          <template slot="zhang" slot-scope="item">   //需要使用 template 包裹
              <div v-for="num in item.data">
                    <p>{{num}}</p>
              </div>
          </template>                                 //需要使用 template 包裹
        </Child>
  </div>
</template>

// 子组件----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
        <slot name="zhang" :data="arr"></slot>
    </div>
</template>

//执行过后就会变成这样----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
        <div v-for="num in arr.data">   //数据会自动换成子组件传递过来的数据
        	<p>{{num}}</p>
        </div>
    </div>
</template>

• 2. 使用 父组件的数据

// 父组件----------------------------------------------------
<template>
  <div id="app">
        <Child>
          <template slot="zhang">
              <div v-for="num in arr">   //直接在这里使用即可 ⬅⬅⬅⬅
                    <p>{{num}}</p>
              </div>
            <h3></h3>
          </template>
        </Child>
  </div>
</template>

<script>
import Child from "./views/Child";

export default {
  data(){
    return{
      arr:[1,2,3,4,5]  //使用这里的数据
    }
  },
  components: {
    Child
  },
};
</script>

// 子组件----------------------------------------------------
<template>
    <div>
        <h5>这里是子组件</h5>
        <slot name="zhang"></slot>
    </div>
</template>

结果展示：