面试题：Vue插槽在父子组件通信中的常规应用场景

Question

请描述Vue插槽在父子组件通信时，常见的应用场景有哪些？并举例说明如何通过插槽实现父子组件间简单的数据传递与展示。

Answer 1

常见应用场景

1. 组件内容定制：当父组件使用子组件时，希望在子组件特定位置插入不同的内容。例如，一个 Dialog 组件，父组件可以在其标题、正文、底部等不同位置插入自定义内容。
2. 复用基础组件：对于一些具有相似结构但部分内容不同的组件，可以通过插槽来复用基础组件。比如 Button 组件，父组件可以通过插槽自定义按钮内的文本或图标。
3. 动态布局：根据不同条件在子组件中插入不同内容，实现动态布局。例如，一个 Tab 组件，不同 Tab 页的内容可以通过插槽动态设置。

数据传递与展示示例

1. 父组件

<template>
  <div>
    <ChildComponent>
      <template v-slot:default="{ dataFromChild }">
        <p>子组件传递的数据: {{ dataFromChild }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

2. 子组件 ChildComponent.vue

<template>
  <div>
    <slot :dataFromChild="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是来自子组件的数据'
    }
  }
}
</script>

在上述示例中，子组件通过 slot 标签上绑定数据 :dataFromChild="message"，父组件通过具名插槽 v-slot:default 接收并展示子组件传递的数据。