vue插槽使用

插槽的分类

插槽分为默认插槽、具名插槽、作用域插槽
需要注意的点是，使用作用域插槽需要搭配template使用

默认插槽

默认插槽使用最为简单：
父级

<template>
  <div>    
    <son>
      <div>我是默认插槽</div>
    </son>
  </div>
</template>

子级

<template>
  <div>
    <slot>我是子组件默认的</slot>
  </div>
<template>

展示：

具名插槽

具名插槽需要给插槽定义一个名字，然后父组件在使用的时候需要把名字对应，对应的名字插槽会展示在对应的位置，不论他在父组件的实际位置在哪里
父级

  <template>
  <div>    
    <HelloWorld>
      <div slot="footer">我是尾部插槽</div>
      <div slot="header">我是头部插槽</div>
    </HelloWorld>
  </div>
</template>

子级

  <template>
  <div>
    <slot name="header">
    </slot>
    <slot name="footer">
    </slot>
  </div>  
</template>

展示：

具名插槽

具名插槽的使用主要是让父组件能访问到子组件中的数据，注意在父组件中插槽的使用.
父级

<template>
  <div>    
    <HelloWorld>
      <template v-slot:user="test"> // user是对应的插槽名字，test是声明的变量名字，能用test去访问子组件中的变量
        {{ test.user.name }}
      </template>
    </HelloWorld>
  </div>
</template>

子级

  <template>
  <div>
    <slot name="user" :user="user"> // 第一个user是插槽的名字，第二个是表示父组件能使用的变量
      {{ user.sex }}
    </slot>
  </div>  
</template>
<script>
export default {
  data: () => {
    return {
      user: {
        name: 'ces',
        sex: '1'
      }
    }
  }
}
</script>

展示