插槽（slot)、普通插槽、具名插槽（多个插槽）、作用域插槽（slot绑定数据）

1.使用普通插槽

 index.vue（引入test.vue,注册)

 <template>
  <p>使用插槽</p>
//使用插槽
    <test>
        <p>插入的内容</p>
    </test>
</template>

test.vue

<template>
  <p>普通插槽</p>
//slot占位
    <slot></slot>
</template>

2.具名插槽（多个插槽）

 index.vue（引入test.vue,注册)

v-slot:可简写为#

 <template>
  <p>具名插槽</p>
    //使用插槽
    <test>
//必须用template包裹
       <template v-slot:header>
             <p>插入的内容</p>
        </template>
    </test>
 <test>
//必须用template包裹
       <template #footer>
             <p>插入的内容</p>
        </template>
    </test>
</template>

test.vue

<template>
  <p>具名插槽</p>
//solt占位
    <slot name="header"></slot>
    <footer>
        <slot name="footer"></slot>
    </footer>
</template>

3.作用域插槽（slot绑定数据）

  index.vue（引入test.vue,注册)

 <template>
  <p>具名插槽</p>
    //使用插槽
    <test>
//必须用template包裹
       //<template v-slot:header="scope">
         //    <p>{{scope}}</p>
        //</template>

//解构赋值
 <template v-slot:header="{msg,info}">
             <p>{{msg}}</p>
            <p>{{info.phone}}</p>

        </template>

    </test>
 <test>
//必须用template包裹
       <template #footer>
             <p>插入的内容</p>
        </template>
    </test>
</template>

test.vue

<template>
  <p>具名插槽</p>
//solt占位
    <slot name="header" :msg="info" :msg2="message"></slot>
    <footer>
        <slot name="footer"></slot>
    </footer>
</template>
export default {
  name: 'App',
  data () {
   return {
    info:{
        phone:'1552555565',
        name:'zs'
    },
message:'1111'
   }
  },
}