面试题：Vue插槽在动态组件渲染及交互中的应用

整体架构思路

父组件：负责管理整体布局以及根据用户选择确定要渲染的子组件类型。通过v-slot来定义插槽，将不同类型编辑模块所需的数据传递给子组件，并监听子组件触发的事件来处理交互。
子组件：每种编辑模块（文本编辑、图片编辑、视频编辑）对应一个子组件。子组件通过插槽接收父组件传递的数据，并在自身内部实现特定的交互逻辑和样式。

传递数据和处理交互

传递数据：父组件通过v-bind在插槽上绑定数据，子组件在插槽内通过解构或直接访问来获取数据。
处理交互：子组件通过$emit触发自定义事件，父组件在使用插槽的地方通过v-on监听这些事件并执行相应的处理函数。

关键代码片段

父组件

<template>
  <div>
    <select v-model="selectedModule">
      <option value="text">文本编辑</option>
      <option value="image">图片编辑</option>
      <option value="video">视频编辑</option>
    </select>
    <component :is="selectedModuleComponent">
      <template v-slot:default="slotProps">
        <!-- 传递数据给子组件 -->
        <slot :data="slotData"></slot>
      </template>
    </component>
  </div>
</template>

<script>
import TextEditor from './TextEditor.vue';
import ImageEditor from './ImageEditor.vue';
import VideoEditor from './VideoEditor.vue';

export default {
  components: {
    TextEditor,
    ImageEditor,
    VideoEditor
  },
  data() {
    return {
      selectedModule: 'text',
      slotData: { /* 要传递的数据 */ }
    };
  },
  computed: {
    selectedModuleComponent() {
      return this.selectedModule === 'text'? 'TextEditor' :
             this.selectedModule === 'image'? 'ImageEditor' :
             'VideoEditor';
    }
  },
  methods: {
    handleChildEvent(data) {
      // 处理子组件触发的事件
      console.log('子组件事件:', data);
    }
  }
};
</script>

子组件（以文本编辑为例）

<template>
  <div>
    <p>文本编辑模块</p>
    <!-- 接收父组件传递的数据 -->
    <p>{{ slotProps.data }}</p>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  name: 'TextEditor',
  inheritAttrs: false,
  props: {
    // 接收父组件传递的数据
    data: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleClick() {
      this.$emit('child-event', '文本编辑模块触发的数据');
    }
  }
};
</script>

在父组件中，通过v-slot:default="slotProps"获取插槽作用域的数据，并通过v-bind:data="slotData"传递数据给子组件。子组件通过props接收数据，通过$emit触发事件，父组件通过v-on:child - event="handleChildEvent"监听事件进行处理。图片编辑和视频编辑子组件类似，只是具体的交互逻辑和样式不同。

星途面试题库

面试题：Vue插槽在动态组件渲染及交互中的应用

知识考点

面试题答案

整体架构思路

传递数据和处理交互

关键代码片段

父组件

子组件（以文本编辑为例）