vue之slot应用

匿名插槽

插槽：slot

slot在组件模板中占好位置，当用到该组件的时候，组件里面的内容就会替换组件模板中slot位置

优点：让用户可以更好的扩展组件，更好的复用组件以及做一些定制化的处理。

插槽的使用

1. 匿名插槽

    //slot_container.vue
   <div class='slot_container'>
      <header>
          <slot></slot>
      </header>
  </div>
  //father.vue
   <slotContainer>
        <template v-slot>
           <span>这是首页</span>
        </template>
   </slotContainer>
   
   //  等价于
    <div class='slot_container'>
      <header>
          <span>这是首页</span>
      </header>
    </div>

匿名插槽在子组件中定义创建一个slot，父组件内template中的内容就可以嵌在子组件内显示出来。

2. 具名插槽

     //slot_container.vue
   <div class='slot_container'>
      <div>
          <slot name="header"></slot>
          <slot></slot>
          <slot name='footer'></slot>
      </div>
  </div>
  
  //father.vue
   <slotContainer>
        <template v-slot:header>
            <span>这是header</span>
        </template>
        <template v-slot>
            <span>这是main</span>
        </template>
        <template v-slot:footer>
            <span>这是footer</span>
        </template>
   </slotContainer>
   
   
    //  等价于
    <div class='slot_container'>
      <div>
          <span>这是header</span>
          <span>这是main</span>
          <span>这是footer</span>
      </div>
    </div>

具名插槽在子组件中定义创建一个slot并添加name属性，我们在父组件中就可以通过template上的指令v-slot找到对应名字的插槽，将内容放到对应的插槽中。

3. 作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。

     //slot_container.vue
   <div class='slot_container'>
      <footer>
          <slot name='footer'  :footerMsg='footerMsg'></slot>
      </footer>
  </div>
  
  setup(props) {
    let footerMsg= ref('底部文字~')
    return {
        footerMsg
    }
  },
  
  //father.vue
   <slotContainer>
       //将插槽 prop 的对象命名为 `slotProps`
       <template v-slot:footer="slotScope">
           <span> {{ slotScope.footerMsg }} </span>
       </template>
   </slotContainer>
   
   
    //  等价于
    <div class='slot_container'>
        <span>底部文字~</span>
    </div>

如果子组件传过来的是对象，我们可以用解构来接收数据

    //v-slot:footer = "{msg}"  // 可以直接使用msg

或者进行重命名

    //v-slot:footer = "{msg: todo}"  // 可以直接使用todo

甚至是可以在传值prop为undefined时候，预先设置值，

    //v-slot:footer = "{msg='something'}"  //初始值为something

4. 具名插槽的缩写

v-slot 指令的缩写为 #

上面具名插槽的代码可以改成

     //slot_container.vue
   <div class='slot_container'>
      <div>
          <slot name="header"></slot>
          <slot></slot>
          <slot name='footer'></slot>
      </div>
  </div>
  
  //father.vue
   <slotContainer>
        //缩写为  `#`
        <template #header>
            <span>这是header</span>
        </template>
        <template v-slot>
            <span>这是main</span>
        </template>
        <template #footer>
            <span>这是footer</span>
        </template>
   </slotContainer>
   
   
    //  等价于
    <div class='slot_container'>
      <div>
          <span>这是header</span>
          <span>这是main</span>
          <span>这是footer</span>
      </div>
    </div>

当然了插槽也是可以进行动态赋值的

v-slot:[slotName]

这里的slotName是一个变量可以动态赋值，在不同的情况下赋值展示不同的插槽内容。

以上就是对插槽的理解。