vue插槽

概念

父组件传给子组件html结构（html结构在子组件标签内书写）

子组件在适当位置放置插槽出口<slot></slot>

插槽出口分为匿名插槽、具名插槽、作用域插槽、动态插槽

匿名插槽

App组件在Son组件的匿名插槽中插入内容

<template>
  <div id="app">
      
    <Son>
        <h1>hi</h1>
    </Son>
      
  </div>
</template>

在Son组件中指定插槽出口，插槽显示的位置

<template>
  <div>
    <p>
      <!-- 
            匿名插槽
            <slot name='default'></slot>
            或
            <slot ></slot>
         -->
      <slot>父组件没有传入时，插槽的默认内容</slot>
    </p>
  </div>
</template>

具名插槽

v-slot:header 简写为 #header

App组件在Son组件的具名插槽中填充内容

<template>
  <div id="app">
      
    <Son>
      <template v-slot:header>
        <h1>App指定header插槽内容</h1>
      </template>

      <template v-slot:main>
        <h1>App指定main插槽内容</h1>
      </template>

      <template v-slot:footer>
        <h1>App指定footer插槽内容</h1>
      </template>
    </Son>

  </div>
</template>

在Son组件中指定插槽出口

<template>
  <div>
    <p>
      <!-- 
            具名插槽
         -->
      <slot name="header">header插槽默认内容</slot>
      <slot name="main">main插槽默认内容</slot>
      <slot name="footer">footer插槽默认内容</slot>

    </p>
  </div>
</template>

作用域插槽

作用域插槽：使父组件能够访问子组件中插槽的数据 (插槽提供数据)

<template>
  <div id="app">
      
    <Son>
      <!-- slotProps接收到子组件中插槽的数据 -->
      <template v-slot:header="slotProps">
        <p>App指定header插槽内容</p>
        <p>{{ slotProps.user }}</p>
      </template>
    </Son>

  </div>
</template>

<template>
  <div>
    <p>
      <!-- 
            作用域插槽：
            在slot标签上绑定自定义属性user
         -->
      <slot name="header" :user="user"></slot>

    </p>
  </div>
</template>

动态插槽

动态插槽：动态的切换插槽名

<Son>
    <template v-slot:[varName]>
		<!-- 
			例：v-slot:header
		-->
        我是具名插槽-{{varName}}
    </template> 
</Son>


data(){
    return {
        varName:'header'
    }
}