单个插槽

  1. // 父组件
  2. <div id="parent">
  3.   <child>test</child>
  4. </div>
  6. <script>
  7.   // 定义全局组件
  8.   Vue.component('child', {
  9.     template: `
  10.             <div class="child">
  11.                 <slot></slot>
  12.           </div>
  13.         `
  14.   })
  15.   const app = new Vue({
  16.     data: {
  17.     },
  18.   })
  19. </script>

具名插槽

  1. // 父组件
  2. <div id="parent">
  3.   <child>
  4.     <template v-slot:title>title</template>
  5.     <!--下面的插槽等同于v-slot:default-->
  6.     <template></template> 
  7.   </child>
  8. </div>
  10. <script>
  11.   // 定义全局组件
  12.   Vue.component('child', {
  13.     template: `
  14.             <div class="child">
  15.                 <slot>默认插槽内容</slot>
  16.                 <slot name="title">名为title的插槽的默认内容</slot>
  17.           </div>
  18.         `
  19.   })
  20.   const app = new Vue({
  21.     data: {
  22.     },
  23.   })
  24. </script>

作用域插槽