VUE Slot

在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段.

<template>
  <h3>ComponentA</h3>
  <ComponentB>
    <h3>插槽传递视图内容</h3>
  </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  components: {
    ComponentB
   }
}
</script>

<template>
  <h3>ComponentB</h3>
  <slot></slot>
</template>

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染

渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的

<template>
  <h3>ComponentA</h3>
  <ComponentB>
    <h3>{{ message }}</h3>
  </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  data(){
    return{
      message:"message在父级"
     }
   },
  components: {
    ComponentB
   }
}
</script>

<template>
  <h3>ComponentB</h3>
  <slot></slot>
</template>

默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容

<template>
  <h3>ComponentB</h3>
  <slot>插槽默认值</slot>
</template>

具名插槽

<template>
  <h3>ComponentA</h3>
  <ComponentB>
    <template v-slot:header>
      <h3>标题</h3>
    </template>
    <template v-slot:main>
      <p>内容</p>
    </template>
  </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  data(){
    return{
      message:"message在父级"
     }
   },
  components: {
    ComponentB
   }
}
</script>

<template>
  <h3>ComponentB</h3>
  <slot name="header"></slot>
  <hr>
  <slot name="main"></slot>
</template>

v-slot 有对应的简写 #，因此 可以简写为