vue插槽slot

最新推荐文章于 2025-11-21 15:30:50 发布

原创最新推荐文章于 2025-11-21 15:30:50 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue.js中三种插槽的使用。普通插槽中，子组件写slot标签，父组件Sub标签内内容会显示在slot处，无内容则展示默认内容；具名插槽通过name属性定义名字，父组件用#号匹配；作用域插槽可让子组件向父组件传递数据，在父组件中使用。

插槽有三种：

1.普通插槽

2.具名插槽

3.作用域插槽

1.普通插槽

sub.vue 子组件 --- 子组件写slot标签，父组件的Sub标签内填写的内容会显示在slot的位置，父组件如果不写内容就会展示默认内容。

<template>
  <div class="card">
    <p>这是子组件本身的内容</p>
    <slot>这是默认内容--如果父组件不传值就会展示这些</slot>
  </div>
</template>

index.vue 父组件

<template>
  <div class="card">
    <Sub>
      <h2>我要传过去</h2>
    </Sub>
  </div>
</template>

展示效果：

2.具名插槽

sub.vue 子组件 --- 用name属性定义每个插槽的名字

<template>
  <div class="card">
    <p>这是子组件本身的内容</p>
    <slot name="slot1">这是第一个插槽</slot>
    <p>穿插内容</p>
    <slot name="slot1">这是二个插槽</slot>
    <p>隔断内容</p>
    <slot name="slot1">这是第三个插槽</slot>
  </div>
</template>

index.vue 父组件 --- 父组件通过#号匹配子组件中对应的插槽位置

<template>
  <div class="card">
    <Sub>
      <template #slot1>
        <h1>传递内容1</h1>
      </template>
      <template #slot2>
        <h2>传递内容2</h2>
      </template>
      <template #slot3>
        <h3>传递内容3</h3>
      </template>
    </Sub>
  </div>
</template>

展示效果：

3.作用域插槽

sub.vue 子组件 --- message和count为子组件要传递给父组件的数据

<template>
  <div class="card">
    <p>这是子组件本身的内容</p>
    <slot message="123" count="1"></slot>
  </div>
</template>

index.vue 父组件 --- 子组件传递过来的内容可以在父组件中使用，比如列表中点击取值

<template>
  <div class="card">
    <Sub v-slot="slotProps">
      <h1>传递内容{{ slotProps.message }} {{ slotProps.count }}</h1>
    </Sub>
  </div>
</template>

或者：另一种写法---配合具名插槽

sub.vue 子组件

<template>
  <div class="card">
    <p>这是子组件本身的内容</p>
    <slot name="name" message="123" count="1"></slot>
  </div>
</template>

index.vue 父组件

<template>
  <div class="card">
    <Sub>
      <template #name="slotProps">
        <h1>传递内容{{ slotProps.message }} {{ slotProps.count }}</h1>
      </template>
    </Sub>
  </div>
</template>

展示效果：