Vue作用域插槽用法

用法：当父组件要在插槽中使用子组件才有的数据自定义渲染逻辑时，就需要用到作用域插槽

<!--父组件-->
<template>
  <div>
    <Child :userList="arr">
      <!--如果要在子组件标签内显示父组件自定义的内容，就需要用到插槽-->
      <!--假设我们要在这里获取arr列表中每一项的属性,但在这里是访问不到的，此时就可以用作用域插槽来解决-->
      <!--父组件通过自定义变量slotprops接收作用域插槽传过来的值-->
      <template v-slot="slotprops">
        <div>姓名：{{slotprops.user.name}}</div>
      </template>
    </Child>
  </div>
</template>

<!--子组件 Child-->
<template>
  <div>
    <div v-for="(item, index) in userList" :key="index">
      <!--子组件通过作用域插槽将item传给父组件-->
      <slot :user="item"></slot>
    </div>
  </div>
</template>

父组件接收到的slotprops是一个对象，子组件使用v-bind传递的值就在slotprops中， 因此我们也可以在父组件中使用对象结构赋值来简化。

<template v-slot="{user}">
    <div>姓名：{user.name}}</div>
</template>