vue — 插槽

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

1.匿名插槽

// 组件Comp1
<template>
  <div>
    组件1 <slot></slot>
  </div>
</template>

// 使用
<h2>匿名插槽</h2>
<comp1><p>组件1内容</p></comp1>

2.具名插槽

// 组件Comp2
<template>
  <div>
    <div>组件2</div>
    <slot></slot>
    <p>分割</p>
    <slot name="content"></slot>
  </div>
</template>

// 使用
<h2>具名插槽</h2>
<comp2>
  <--默认插槽使用default作为参数-->
  <template v-slot:default>标题</template>
  <template v-slot:content>内容</template>
</comp2>

3.作用域插槽

// 组件Comp3
<template>
  <div>
    <div>组件3</div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: 'xu',
        lastName: 'xiaoyin'
      },
    }
  }
}
</script>

// 使用
<h2>作用域插槽</h2>
<comp3>
  <template v-slot:default="slotProps">
    <div>{{slotProps.user.lastName}}</div>
  </template>
</comp3>