vue的slot插槽

父组件：

<style scoped lang='scss'>
.model{
     
  height: 100%;
  width: 50px;
  background: #f60
}
</style>

<template>
<div class='solt'>
  <Unit title='插槽'>
    <template v-slot:unitleft>
      <div class="model">left</div>
    </template>
    <template slot-scope="scope">
      <span @click="tick(scope)">
        <span>{
     {
     scope.userInfo.name}},</span>
        <span>{
     {
     scope.userInfo.age}}</span>
      </span>
    </template>
    <template v-slot:unitright>
      <div class="model">right</div>
    </template>
  </Unit>
</div>
</template>

<script>
import Unit from './components/unit'
export default {
     
  data(){
     
    return{
     
    
    }
  },
  components:{
     
    Unit
  },
  methods:{
     
    tick(e){
     
      console.log(e.userInfo.name,e.userInfo.age)
    }
  }
}
</script>

子组件:

<style scoped lang='scss'>
.unit {
     
  width: 100%;
  height: 100px;
  background: #f2f2f2;
  text-align: center;
  line-height: 100px;
  letter-spacing: 1px;
  .unit-leftunit {
     
    float: left;
    height: 100%;
  }
  .unit-rightunit {
     
    float: right;
    height: 100%;
  }
}
</style>

<template>
  <div class="unit">
    <div class="unit-leftunit">
      <slot name="unitleft"></slot>
    </div>
    <slot :userInfo="userInfo"></slot>
    <div class="unit-rightunit">
      <slot name="unitright"></slot>
    </div>
  </div>
</template>

<script>
export default {
     
  props: ['title'],
  data () {
     
    return {
     
      userInfo: {
     
        name: 'ych',
        age: 23
      }
    }
  }
}
</script>

效果：