3.vue知识点v-slot(插槽)

---

一、自定义组件中定义插槽

• 代码示例
  自定义组件，包含两个插槽，一个是默认插槽，一个是具名插槽

      <template>
          <div class="demo-alert-box">
          <span>
              <slot v-bind:user="user">{{user.lastname}}slot>
          span>
          <h3>
              <slot name="titleSlot" v-bind:user="user">{{user.lastname}}slot>
          h3>
          div>
      template>
  
      <script>
          export default {
              data(){
                  return{
                      user:{
                          firstname:'tony',
                          lastname:'tommars'
                      }
                  }
              }
          }
      script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

二、具名插槽

1.说明

• 第一个slot的名字是隐含的，默认是default
• 第二个slot名字指定，在向具名插槽提供内容的时候，我们可以在一个