Vue的props和slot插槽的区别

区别就是slot更方便 直接用 什么类型都可以传进去，标签 组件都行！！！

而props就还需要定义 有时也可设置数据的校验和默认值等等！

举例：

假设我们有一个父组件ShoppingCart，用于显示购物车中的商品列表。这个组件应该接收一个数组类型的props，其中包含了购物车中的多个商品信息。同时，每个商品可能需要显示在不同的位置上，因此我们可以为每个商品定义一个插槽，用于在父组件中动态地渲染。

首先是ShoppingCart组件的模板结构（省略了样式和实际操作）：

<template>
  <div class="shopping-cart">
    <h2>My Shopping Cart</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <slot name="product" :item="item"></slot>
        <p>{{ item.name }}</p>
        <span>{{ item.price }}</span>
      </li>
    </ul>
  </div>
</template>

在这个模板中，我们使用了一个v-for指令遍历items数组，将每个数组项都渲染为一个li元素。在每个li元素中，我们定义了一个名为“product”的slot，并通过:item属性将当前商品传递给它。此外，我们还在li元素内部渲染了每个商品的名称和价格。

接下来，我们在父组件中使用这个ShoppingCart组件，并为每种商品自定义不同的插槽内容。代码如下

<template>
  <div class="parent-component">
    <ShoppingCart :items="cartItems">
      <template #product="{ item }">
        <div class="product-item">
          <img :src="item.image" alt="product image" />
          <h3>{{ item.name }}</h3>
          <span>{{ item.price }}</span>
        </div>
      </template>
    </ShoppingCart>
  </div>
</template>

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

export default {
  components: {
    ShoppingCart,
  },
  data() {
    return {
      cartItems: [
        {
          name: 'Product A',
          price: 10,
          image: 'https://example.com/product-a.jpg',
        },
        {
          name: 'Product B',
          price: 20,
          image: 'https://example.com/product-b.jpg',
        }
      ],
    };
  },
};
</script>

在这个例子中，我们首先导入了ShoppingCart组件，并在父组件中通过props将cartItems数组传递给它。接着，我们为每种商品定义了一个名为“product”的插槽，并在其中渲染了商品的名称、价格和图片。

当Vue渲染这个父组件时，它会自动将cartItems数组传递给ShoppingCart组件，并将每个商品的信息传递给对应的“product”插槽。这样，我们就可以灵活地定制每个商品在购物车中的显示方式，同时保持了组件之间的清晰分离。