0
点赞
收藏
分享

微信扫一扫

vue中的slot(插槽)

朱悟能_9ad4 2022-02-03 阅读 165

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。

插槽的分类:默认插槽,具名插槽,作用域插槽
1. 默认插槽
默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据

子组件:
<div>
    <slot></slot>
</div>
父组件:
<heads>你好</heads>

 

2. 具名插槽
具名插槽是在父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。

# 子组件:
<template>
  <div class='button'>
      <slot name='one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>
# 父组件:
<template>
  <div class='app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>
当然 vue 为了方便,书写 v-slot:one 的形式时,可以简写为 #one

 

3. 作用域插槽

//子组件 : (假设名为:ebutton)
<template>
  <div class='button'>
      <slot name='one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据,这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件:(引用子组件 ebutton)
<template>
  <div class='app'>
     <ebutton> 
        <template v-slot:one = 'slotone'>  
           {{ slotone.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给slotone 
        </template>
        <template v-slot:default = 'slottwo'> 
           {{ slottwo.value2 }}  // 同上,由于子组件没有给slot命名,默认值就为default
        </template>
     </ebutton>
  </div>
</template>

总的来说

  • 首先在子组件的slot上动态绑定一个值( :key='value')
  • 然后在父组件通过v-slot:name = 'values'的方式将这个值赋值给 values
  • 最后通过{ { values.key }}的方式获取数据
举报

相关推荐

0 条评论