vue使用插槽slot

vue中使用slot插槽
父组件

   <!-- 插槽的使用 父组件-->
       <slot-use>
         <!-- <div>你好我是父组件</div> -->
         //父组件接受子组件的数据
         <template  slot-scope="child"   slot="header">
            我是头部{{child.data.join("")}}
         </template>
         <template  slot="footer">
           我是底部
         </template>
         <div>你好我是底部组件</div>
       </slot-use>

//子组件的内容
<template>
    <div  class="slotContainder">
        <div>我是子组件</div>
        //子组件的数据要传值给父组件
        <slot :data="data"    name="header"></slot>
        <slot  name="footer"></slot>
    </div>
</template>

<script>
export default {
    name:'slotContainder',
    data(){
        return{
             data:[
                 "你好",
                 "我回家",
                 "我适合回家"
             ]   
        }
    }
}
</script>