Vue-插槽

插槽 (Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

<!--    声明一个插槽区域-->
<!--    官方规定，每一个插槽，都需要指定name-->
<!--    如果不指定，默认为default-->
    <slot name="default">
      <h6>插槽中的默认内容</h6>
    </slot>

      <Left>
<!--       如果要把内容填充到指定插槽中，需要使用v-slot:这个指令-->
<!--        v-slot:后面跟插槽名-->
<!--        v-slot:指令只能用于template标签上，不能直接作用于元素，它只是起到包裹作用，不会渲染到html中-->
<!--        v-slot:简写成#-->
        <template #default>
          <p>插槽内容</p>
        </template>

      </Left>

 

具名插槽

<!--    标题-->
    <div class="header-box">
      <slot name="title"></slot>
    </div>
<!--    内容-->
    <div class="content-box">
      <slot name="content"></slot>
    </div>
<!--    作者-->
    <div class="footer-box">
      <slot name="footer"></slot>
    </div>

使用插槽

      <template #title>
        <h3>一首诗</h3>
      </template>
      <template #content>
        <div>124124</div>
      </template>
      <template #footer>
        <div>bgg</div>
      </template>

 

作用域插槽

<slot name="content" msg="hello vue"></slot>


//使用

<template #content="scope">
  <div>124124</div>
  <p>{{scope.msg}}</p>
</template>