具名插槽 并列显示任意品牌系列下手机三个（例：小米13，小米14，小米15）写出完整代码

具名插槽（Named Slots）在Vue.js中是一种用于复用模板的部分并传递自定义数据的功能。它可以让你在组件的模板上定义一些特殊的区域，这些区域可以被其他组件通过传入的数据来填充内容。对于列出一系列手机型号的例子，我们可以创建一个通用的手机列表组件，并在每个元素上使用具名插槽。

首先，我们定义一个名为`PhoneList`的组件，它接受一个手机数组作为props：

<template>
  <div class="phone-list">
    <ul>
      <li v-for="(phone, index) in phones" :key="index">
        <slot name="model">默认模型展示</slot>
        <span> - </span>
        <slot-scope="{ phone }">{{ phone.brand }} {{ phone.series }}</slot-scope>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    phones: { type: Array, required: true },
  },
};
</script>

然后，在需要展示小米手机系列的组件中使用这个`PhoneList`组件，并传递具体的手机数据：

<template>
  <PhoneList :phones="miPhones">
    <!-- 使用具名插槽 -->
    <template slot="model">
      <span>{{ phone.name }}</span>
    </template>
  </PhoneList>
</template>

<script setup>
import { ref } from 'vue';
const miPhones = [
  { brand: '小米', series: '13', name: '小米13' },
  { brand: '小米', series: '14', name: '小米14' },
  { brand: '小米', series: '15', name: '小米15' },
];
</script>

这样，当你渲染`PhoneList`时，会用传入的品牌和系列数据替换`model`和每个`series`对应的插槽内容。