Vue插槽的用法

1、组件上的数据，插槽位置是访问不到的，插槽位置处于父组件中，只能访问父组件的数据

  <div class="takeOutFood">
    <Shop price="1">
      // 这个price访问不到
      {{price}}
    </Shop>
  </div>

2、具名插槽

// Shop.vue
<template>
  <div class="shop">
    <slot name="a"></slot>
    <slot name="b"></slot>
    <slot></slot>
    <img src="../assets/img/shop-avator.png" alt="" width="100px" height="100px" style="border-radius: 10px;">
    <div class="details">
      <h5>{{shop.name}}</h5>
    </div>
  </div>
</template>

// TakeOutFood.vue
<template>
  <div class="takeOutFood">
    <Shop price="1">
      <template v-slot:b>
        <span>bbb</span>
      </template>
      <template v-slot:a>
        <span>aaa</span>
      </template>
      <template>
        <span>默认插槽</span>
      </template>
    </Shop>
  </div>
</template>

3、作用域插槽 slot标签里<slot name="a" v-bind:someProperty="propInTheSon">

父组件插槽位置<template v-slot:a="slotProps">{{slotPropers.someProperty}}</template>

slotProps这个名字随便取一个就行，代表子组件传出来的所有属性的集合对象

如果是默认插槽 :a就不用写 直接用v-slot就行