vue插槽的两种情况

发表于 分类于 Waline： 本文字数： 243
记录vue插槽的两种情况

默认/具名插槽：父传给子

一般用于父组件传递不同的数据给子组件，子组件根据这些数据提供固定的插槽位置。当父组件使用这些插槽时，会替换其设置的默认插槽内容。

具名插槽：子组件设置name属性，父组件绑定v-slot:相应name指令，注意是:（为了区别于具名插槽）。默认插槽则不用。

父组件：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <Child>
    <template v-slot:header>
      <h1>这是header</h1>
    </template>
    <template #footer>
      <!--  简写   -->
      <h1>这是footer</h1>
    </template>
  </Child>
</template>

子组件：

1
2
3
4
5
6
<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽：子传给父

一般用于同时使用父组件域内和子组件域内的数据，或子组件有固定数据，但在父组件中有不同的展现形式。

父组件：

1
2
3
4
5
6
7
<template>
  <Child>
    temolate v-slot="slotProps">
      <h1>{{slotProps.data1}}</h1>
      <h1>{{slotProps.data2}}</h1>
  </Child>
</template>

子组件传递相应的属性（可以用v-bind）

1
2
3
4
5
<template>
  <div>
    <slot :data1="data1" data2="1"></slot>
  </div>
</template>

具名插槽和作用域插槽可以同时使用，如<template v-slot:name="slotProps"></slot>，即在v-slot后加上name属性，或简写#name。

如找不到对应的插槽，则插入失败。