vue作用域插槽详解、slot、v-slot、slot-scope

<template slot="test" slot-scope="prop">
   {{ prop.wife.a }}
 </template>

 <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>

<template>
  <div>
    <slot :user="user">
      <!-- 默认显示的值，当父组件使用次作用域插槽时，会被覆盖 -->
      {{ user.age }} 
    </slot>
    <slot name="test" :wife='wife'>
      {{wife.a}}
    </slot>
    <slot name="hasProps" :baseData='baseData'>
      {{baseData.a_count}}
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: () => {
        return {
          a_count: 0,
          b_count: 0,
          c_count: 0,
          d_count: 0,
          e_count: 0,
          order_amount: 0,
          order_num: 0,
          resource_num: 0
        }
      }
    }
  },
  data () {
    return {
      user: {
        name: '张三',
        age: 20
      },
      wife: {
        a: '小李',
        b: '小韩'
      }
    }
  }
}
</script>

  <div>
      <child>
        <template v-slot:default="prop">
          {{ prop.user.age }}
        </template>
        <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>
      </child>
      
      <child>
        <template slot-scope="prop">
          {{ prop.user.name }}
        </template>
        <template slot="test" slot-scope="prop">
          {{ prop.wife.a }}
        </template>
      </child>
      <!-- 尝试解构赋值 -->
      <child :baseData='baseData'>
        <template v-slot:hasProps="{baseData}">
          {{ baseData.a_count }}
        </template>
      </child>
    </div>