Vue 中插槽的默认内容是什么？

推荐答案

在 Vue 中，插槽的默认内容是通过在 <slot> 标签内部定义的内容来实现的。如果父组件没有提供插槽内容，那么默认内容将会被渲染。

<template>
  <div>
    <slot>这是默认内容</slot>
  </div>
</template>

本题详细解读

插槽的基本概念

Vue 的插槽（Slot）是一种用于组件内容分发的机制。它允许你在组件中定义一个占位符，父组件可以通过这个占位符向子组件传递内容。插槽的主要目的是让组件的结构更加灵活，允许父组件自定义子组件的部分内容。

默认内容的作用

默认内容是指在父组件没有提供插槽内容时，子组件会渲染的备用内容。这在某些情况下非常有用，比如当父组件不需要自定义内容时，子组件可以提供一个默认的展示效果。

示例代码

// www.javascriptcn.com code example
<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <slot>这是默认内容</slot>
  </div>
</template>

<!-- 父组件 App.vue -->
<template>
  <div>
    <MyComponent />
    <MyComponent>
      <p>这是自定义内容</p>
    </MyComponent>
  </div>
</template>

运行结果

• 第一个 <MyComponent /> 会渲染默认内容：“这是默认内容”。
• 第二个 <MyComponent> 会渲染父组件提供的自定义内容：“这是自定义内容”。

总结

通过使用插槽的默认内容，Vue 组件可以变得更加灵活和可复用。默认内容确保了即使父组件没有提供内容，子组件仍然能够正常渲染，并且不会出现空白或错误的情况。