vue插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

// 布局组件
<template>
  <div class='layout'>
    // name用于匹配插槽            slot接参
    <slot name='header' :slotProps='slotProps'>
      {{slotProps}}  
    </slot>
    // 没有name默认为default
    <slot></slot>
    <slot name='footer'>
            // 可在插槽中放入默认值，在不指定此插槽时，默认显示默认值
        这是头部插槽   
    </slot>
  </div>
</template>
<script>
  export default {
    name: 'Layout'
}
</script>
<style>
</style>
// 使用插槽
<template>
  <div class='home'>
    <Layout>
        // 用template模板v-slot指令匹配所对应的name的插槽
        // slot
      <template v-slot:header='slotProps'>头部</template>
      // 不指定v-slot，默认defualt
      <template>主体</template> 
      // 不写插槽则不会显示或显示插槽的原本默认值
            //footer
    </Layout>
  </div>
</template>
<script>
 import Layout from './Layout';
  export default {
    name: 'Home',
    components: {
      Layout,
    },
    data() {
        return {
          slotProps: '123'
      }
    },
}
</script>
<style>
</style>