面试题：Vue中v - slot指令在组件嵌套场景下的使用

Question

假设有一个父组件`ParentComponent`和一个子组件`ChildComponent`，`ChildComponent`定义了一个具名插槽`named - slot`。请在`ParentComponent`中使用`v - slot`指令向`ChildComponent`的`named - slot`插槽传递一个包含数据的模板，数据为一个数组`['item1', 'item2', 'item3']`，并在插槽模板中循环展示这些数据。请写出相关的Vue模板代码。

Answer 1

<template>
  <div>
    <ChildComponent>
      <template v-slot:named - slot>
        <ul>
          <li v - for="(item, index) in items" :key="index">{{ item }}</li>
        </ul>
      </template>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    };
  }
};
</script>