vue中具名插槽使用

vue官网具名插槽：https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

父组件：

<template>
  <div class="parent">
     <Test>
      <template v-slot:header>
        我是头部
      template>

      <p>我是默认插槽内容p>

      <template v-slot:footer>
        我是尾部
      template>
    Test>
  div>
template>

<script>

import Test from './test.vue'
export default {
  name: "parent",
  components:{
    Test
  },
  data() {
    return {
        
    };
  }
};
script>

<style scoped lang="scss">

style>

子组件：

<template>
  <div class="test">
      test组件
      
      <div>
          <slot name="header">slot>
      div>
      
      <div>
          <slot>slot>
      div>
      
      <div>
          <slot name="footer">slot>
      div>
  div>
template>

<script>

export default {
  name: "test",
  components:{
    
  },
  data() {
    return {
        
    };
  }
};
script>

<style scoped lang="scss">
    .test{
        color: red;
    }
style>

渲染结果：