面试题：Vue插槽中默认内容在什么情况下会被渲染？

Question

在Vue组件的插槽使用中，解释默认内容会在何种场景下被渲染出来，同时举例说明如何设置默认内容。

Answer 1

默认内容渲染场景

当父组件在使用子组件时，没有向子组件插槽传入任何内容时，子组件插槽的默认内容会被渲染出来。

设置默认内容示例

假设我们有一个 MyComponent 组件，模板如下：

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

在父组件中使用 MyComponent：

<template>
  <div>
    <MyComponent></MyComponent>
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
}
</script>

此时，由于父组件在使用 MyComponent 时没有向插槽传入内容，所以会渲染出 MyComponent 插槽内设置的默认内容 “这是插槽的默认内容”。若父组件向插槽传入内容：

<template>
  <div>
    <MyComponent>
      <p>这是传入的内容</p>
    </MyComponent>
  </div>
</template>

则传入的内容 “这是传入的内容” 会替代默认内容被渲染。