Vue 插槽

Vue 插槽

参考：https://zhuanlan.zhihu.com/p/114502325

1. 具名插槽

子组件：component3

<template>
  <div class="button">
    <button>插槽</button>
    <slot name="one">这是默认值1</slot>
    <slot name="two">这是默认值2</slot>
    <slot name="three">这是默认值3</slot>
  </div>
</template>

父组件：

通过 v-slot : name 的方式添加内容

<template>
  <div class="component3">
    <component3>
      <template v-slot:one><p>这是插入到one插槽的内容</p></template>
      <template #two><p>这是插入到two插槽的内容</p></template>
      <template v-slot:three><p>这是插入到three插槽的内容</p></template>
    </component3>
  </div>
</template>

vue 为了方便，书写 v-slot:one 的形式时，可以简写为 #one

2. 作用域插槽

子组件 component3：

<template>
  <div class="button">
    <button>插槽</button>
    <slot name="one" :value1='child1'>这就是默认值1</slot>
    <slot :value2='child2'>这就是默认值2</slot>
  </div>
</template>

<script>
  export default {
    name: "component3",
    data(){
      return{
        child1: '数据1',
        child2: '数据2'
      }
    }
  }
</script>

父组件：

<template>
  <div class="about">
    <component3>
      <template v-slot:one = 'slotone'>
        {{ slotone.value1 }}
      </template>
      <template v-slot:default = 'slottwo'>
        {{ slottwo.value2}}
      </template>
    </component3>
  </div>
</template>

3. 总结

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