# vue源码 插槽

<template>
  <div class="apps">
    <inner>
      <template 
      v-slot:test1> test1 </template>
    </inner>

    <inner>
      <template 
     v-slot:test2="slotProps"
    > {{slotProps.in_data}} </template>
    <!-- 接收inner外传的数据 -->
    </inner>
  </div>
</template>


<script>
import inner from "./inner";
export default {
  name: "outer",
  components: {
    inner,
  },
};
</script>

//子
<template>
  <div class="child">
    <slot></slot>
    <!-- test 去到了slot里面 -->
    <slot name="test1"></slot>
    
    <slot name="test2" :in_data="in_data"></slot>


    <button type="submit">
      <slot name="btn">Submit</slot>
    </button>

  </div>
</template>

<script>
export default {
  name: "inner",
  data:()=>{
      return{
          in_data:'yiki'
      }
  }
};

// 结果
<div class="apps">
<div class="child">  test1   
<button type="submit">Submit</button>
</div> <div class="child">  
 yiki  
 <button type="submit">Submit</button>
 </div>
 </div>