重学vue之slot用法（包含作用域插槽）

说明

插槽好比子组件留好位置，父组件写好一个dom结构，包括样式这些，然后把这个dom扔到子组件预留的空位中。（这只是形象记忆哈。。。。。。）

• 老版本的用法入口

常规用法

• 注意这里的写法，老板本中是用一个等号

父组件中

<template>
    <div>
        <child/>

        <!-- 指定这个结构传到名字叫slot1的插槽 -->
          <template v-slot:slot1>
            <div>我是父组件传递过来的1</div>
          </template>

        <!-- 指定这个结构传到名字叫slot2的插槽 -->
         <template v-slot:slot2>
            <div>我是父组件传递过来的2</div>
         </template> 

        </child>
      </div>
</template>

子组件中

<template>
  <div>
        <slot name="slot1"></slot>
        <slot name="slot2"></slot>
 </div>
</template>

作用域插槽

• 注意这里的写法，老板本中是用slot-scope="props"获取
  父组件中

<template>
  <child v-slot="{childDate}">
        <div>{
   
   {childDate}}</div>
  </child>
</template>

子组件中

<div>
    <slot v-for="childDate in 10" :item="childDate" />
</div>