vue插槽 2021/04/07

最新推荐文章于 2025-05-11 00:01:42 发布

原创最新推荐文章于 2025-05-11 00:01:42 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了Vue.js中组件插槽的三种类型：匿名插槽、具名插槽和作用域插槽。通过示例展示了如何使用它们来组织和重用组件内容，包括如何在父组件中指定内容插入到子组件的特定位置，以及如何通过作用域插槽传递数据。

1.匿名插槽:不带名字的，默认会替换内容

<button type=“submit”>
<slot>
</button>

2.具名插槽：

<template>
    <div class="container">
      <header>
        <!-- 我们希望把页头放这里 -->
      </header>
      <main>
        <!-- 我们希望把主要内容放这里 -->
      </main>
      <footer>
        <!-- 我们希望把页脚放这里 -->
      </footer>
    </div>
</template>

对于这样的情况，元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 父组件在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<template>
  <myslot>
    <div>大家好我是父组件</div>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template v-slot:footer>
      <p>Here's footer info</p>
    </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
  }
</script>
<style>
</style>

结果
Here might be a page title
大家好我是父组件
A paragraph for the main content.

And another one.

Here’s footer info
3.作用域插槽
简单来说就是通过v-bind:name=‘proName’ 绑定slot名称和数据