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组件
      <!-- header 具名插槽 -->
      <div>
          <slot name="header"></slot>
      </div>
      <!-- content 默认插槽 -->
      <div>
          <slot></slot>
      </div>
      <!-- footer 具名插槽 -->
      <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>

 

渲染结果：