Vue插槽：深入源码解析与应用技巧大揭秘

2023-09-30 23:46:14

一、Vue插槽是什么？

在Vue中，插槽是一种特殊组件，允许你将内容动态地插入另一个组件。这使得你可以创建可重用的组件，而无需担心如何将内容放入这些组件中。

二、插槽的基础用法

要使用插槽，你需要先创建一个插槽组件。这可以通过使用<template>标签来完成，如下所示：

<template>
  <div>
    <!-- 插槽内容将被插入此处 -->
  </div>
</template>

然后，你可以在其他组件中使用这个插槽组件。例如，你可以创建一个名为“UserCard”的组件，如下所示：

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>

    <!-- 使用插槽组件 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        email: 'john.doe@example.com'
      }
    }
  }
}
</script>

在其他组件中，你可以使用<UserCard>组件，并在其中插入你想要显示的内容。例如，你可以创建一个名为“UserProfile”的组件，如下所示：

<template>
  <div>
    <!-- 使用 UserCard 组件 -->
    <UserCard>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </UserCard>
  </div>
</template>
</script>

当你在浏览器中渲染“UserProfile”组件时，UserCard组件中的插槽内容将被插入到<slot>标签中。这将导致以下HTML被渲染：

<div>
  <h1>John Doe</h1>
  <p>John.doe@example.com</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>