vue2笔记10 插槽

让父组件向子组件指定位置插入html结构

默认插槽

定义

<template>
  <div class="hello">
    <h3>title</h3>
    <!-- 定义一个插槽，将使用组件标签时传递的内容（innerText/innerHtml）填充到此处 -->
    <slot>默认值，使用组件标签时没有传内容则显示这个</slot>
  </div>
</template>

使用

<template>
  <div class="container">
    <HelloWorld>
      123
    </HelloWorld>
    <HelloWorld>
      <button>456</button>
    </HelloWorld>
    <HelloWorld/>
  </div>
</template>

注，通过插槽填入的元素样式通过所在的组件定义，在使用处定义scoped样式不会生效

具名插槽

<template>
  <div class="hello">
    <h3>title</h3>
    default:
    <slot>默认值，使用组件标签时没有传内容则显示这个</slot>
    slot1:
    <slot name="slot1">slot1</slot>
    slot2:
    <slot name="slot2">slot2</slot>
  </div>
</template>

<template>
  <div class="container">
    <HelloWorld>
      <!-- 只能在template上使用v-slot指令 -->
      <template v-slot:default>
        123
      </template>
      <template v-slot:slot1>
        <a href="">slot1</a>
      </template>
      <!-- 在组件上指定插槽名 -->
      <button slot="slot2">slot2</button>
    </HelloWorld>
    <HelloWorld>
      <h3>456</h3>
    </HelloWorld>
    <HelloWorld/>
  </div>
</template>

作用域插槽

数据在组件中定义，数据的呈现形式在插槽使用者中中定义

<template>
  <div class="hello">
    <!-- 将数据传递给插槽使用者 -->
    <slot :datalist="datalist"></slot>
  </div>
</template>

<template>
  <div class="container">
    <HelloWorld>
      <!-- 绑定插槽属性 -->
      <template v-slot:default="slotProps">
        <ul>
          <li v-for="(item,index) in slotProps.datalist" :key="index">{{ item }}</li>
        </ul>
      </template>
    </HelloWorld>
    <HelloWorld>
      <!-- 支持解构赋值 -->
      <template v-slot:default="{datalist}">
        <h2 v-for="(item,index) in datalist" :key="index">{{ item }}</h2>
      </template>
    </HelloWorld>
    <!-- 只有金存在默认插槽时，可以直接在组件上绑定属性 -->
    <HelloWorld v-slot="slotProps">
      <ol>
        <li v-for="(item,index) in slotProps.datalist" :key="index">{{ item }}</li>
      </ol>
    </HelloWorld>
  </div>
</template>