Vue 插槽slot 以及传递多个props

<!--
 * @Descripttion: 插槽slot
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-05-14 09:08:01
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-06-29 09:51:02
--> 
<template>
  <div class="topCon">
    <header-two>
      <template v-slot:header="slotProps">
        <h1>{{slotProps.user1.lastName}}</h1>
        <h1>{{slotProps.user2.lastName}}</h1>
      </template>
      <template v-slot:contenter>
         <p>A paragraph for the main content.</p>
         <p>And another one.</p>
      </template>
      <template v-slot:footer>
         <h2>Here's some contact info</h2>
      </template>
    </header-two>
  </div>
</template>

<script>
import headerTwo from "./headerTwo";
export default {
  name: "enterpriseDetail",
  components: {
    headerTwo
  },
  data() {
    return {
      
    };
  },
  computed: {},
  methods: {
    
  }
};
</script>

<style  scoped lang="less">
</style>

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-06-28 15:24:08
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-06-29 09:48:01
--> 
<template>
    <div class="headerTwo">
         <slot name="header" v-bind:user1="user1" v-bind:user2="user2">
           <h1>{{user1.firstName}}</h1>
           <h1>{{user2.firstName}}</h1>
         </slot>
         <slot name="contenter"></slot>
         <slot name="footer"></slot>
    </div>
</template>

<script>
export default {
  name: "headerTwo",
  data() {
    return {
      user1:{
          firstName  :"zhang",
          lastName :"san"
      },
      user2:{
          firstName  :"li",
          lastName :"si"
      }
    };
  },
 

};
</script>

<style  scoped lang="less">

</style>