Vue插槽之具名插槽新增api

2.6.0版本之前具名插槽的使用方式

2.6.0以前定义具名插槽的方式

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
  export default {
    name: "ComponentB",
  }
</script>

2.6.0以前使用具名插槽的方式

<template>
  <div id="app">
    <component-b>
      <div slot="header">
        <div>header</div>
      </div>
      <div slot="content">
        <div>content</div>
      </div>
      <div slot="footer">
        <div>footer</div>
      </div>
    </component-b>
  </div>
</template>

<script>
  import ComponentB from "./components/ComponentB";
  export default {
    name: 'App',
    components: {ComponentB}
  }
</script>

2.6.0版本之后具名插槽的使用方式

定义具名插槽的方式没有发生变化，使用具名插槽的方式发生了变化

<template>
  <div id="app">
    <component-b>
      <template v-slot:header>
        <div>header</div>
      </template>
      <template v-slot:content>
        <div>content</div>
      </template>
      <template v-slot:footer>
        <div>footer</div>
      </template>
    </component-b>
  </div>
</template>

<script>
  import ComponentB from "./components/ComponentB";
  export default {
    name: 'App',
    components: {ComponentB}
  }
</script>

还有一点需要注意

2.6.0之前使用具名插槽的时候 slot=“slotName” 可以使用在template上也可以使用在其他元素上。2.6.0之后只能使用在template上。只有一种情况例外