平常使用插槽

例如如下组件：

  1. <template>
  2. <!-- 名为Button的模板组件 -->
  3. <button>
  4.     <slot />
  5. </button>
  6. </template>

使用Button组件：

  1. <template>
  2. <Button>
  3.     你好  
  4. </Button>
  5. </template>

那么页面就会渲染这个内容为“你好”的按钮！

具名插槽 v-slot

一个场景，假如Button组件有多个<solt/>，那么我使用这个组件时怎么准确的为每个<slot/>渲染内容？
那么就需要v-slot，如下使用：

  1. <template>
  2. <!-- 名为Button的模板组件 -->
  3. <button>
  4.   <!-- 这里我希望的内容为“你好” -->
  5.     <slot name="jeff1"/>    
  6. </button>
  7. <button>
  8.   <!-- 这里我希望的内容为“世界” -->
  9.     <slot name="jeff2"/>
  10. </button>
  11. <button>
  12.   <!-- 这里我希望的内容为“Vue3” -->
  13.     <slot name="jeff3"/>
  14. </button>
  15. </template>

然后使用该组件就需要如下使用：

  1. <template>
  2. <Button>
  3.   <template v-solt="jeff1">
  4.         你好  
  5.   </template>
  6.   <template v-solt="jeff2">
  7.         世界 
  8.   </template>
  9.   <template v-solt="jeff3">
  10.         Vue3
  11.   </template>
  12. </Button>
  13. </template>

那么就会依次准确渲染！