1.插槽的内容与出口

父组件负责传递内容，子组件通过slot来接收内容

//父组件
<Child>
    <span>我是父组件的内容</span> //插槽的内容
</Child>

// 子组件
<div> 
    <slot></slot> //父组件传递过来的内容，插槽的出口
</div>

2.渲染作用域

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

<span>{{ message }}</span>
<FancyButton>{{ message }}</FancyButton>

3.默认内容

当父组件未传递内容时，子组件的默认内容生效，传递后则失效

//子组件
<div> 
    <slot>我是子组件的默认内容</slot>
</div>

4.具名插槽

在组件中其实是有很多插槽出口的，可以通过具名插槽实现把内容传递給不同的位置。

v-slot对应的简写#

父组件如果不写v-slot时是默认插槽，子组件相对于写成<slot></slot>或者<slot name='default'></slot>

//父组件
<Child>
    <template v-slot:header>父组件header专属位置</template>
    我是main的内容
    <template #:footer>父组件footer专属位置</template>
</Child>

//子组件
<div>
    <header>
        <slot name='header'>header默认内容</slot>
    </header>
    <main>
        <slot>main默认内容</slot>
    </main>
    <slot>
        <solt name=''footer>footer默认内容</slot>
    </footer>
</div>

5.动态插槽

官网的例子，就是动态插槽名

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

6. 作用域插槽

可以通过传值的方式把子组件的数据传递給父组件去使用

v-slot:headaer 对应缩写 #header

//父组件
<Child>
    <template v-slot:header='headerProps'>
        {{ headerProps.text }}
    </template>
    
</Child>

//子组件
<div>
    <slot name='header' :text='123'> </slot>
</div>

Vue中插槽的使用方法(记录)