vue 插槽

1、匿名插槽

//父组件
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>     
      <h1>我是helloworld中的插槽啊</h1>  //没有插槽，这里的内容不显示
    </HelloWorld>
  </div>
</template>
//子组件Nav
<template>
  <div class="Nav">
     Nav组件
     <div class = 'slotTxt'>
       <slot></slot>
     </div>

  </div>
</template>

2、具名插槽

//父组件
　　　<template>
　　　　<div>
　　　　　　<Nav>  //子组件
　　　　　　	<template v-s1>//s1通过在template上写v-slot:name来使用具名插槽内容
　　　　　　　　<p>s1具名插槽内容</p> 
　　　　　　 </template>
　　　　　　 <template v-slot:left>　
　　　　　　　　<p slot="s2">222</p>//s2具名插槽内容
　　　　　　　</template>　
　　　　　　　<template slot="s3">　
　　　　　　　　<v-zujian></v-zujian>//s3具名插槽内容,可以是组建
　　　　　　　</template>　
　　　　　　<Nav>
　　　　</div>
　　　</template>
//　　子组件Nav
　　　<template>
　　　　<div>
　　　　　　<slot name="s1"></slot>//插入s1具名插槽
　　　　　　<slot name="s2"></slot>//插入s2具名插槽
　　　　　　<slot name="s2"></slot>//插入s2具名插槽
　　　　</div>
　　　</template>

3、作用域插槽（父组件中插槽数据用子组件传过来的数据）

　　//父组件  v-slot:default="随意取的名字"||default可省略，简写为v-slot="随意取的名字"
　　　<template>
　　　　<div>
　　　　　　<Nav>
　　　　　　　　<p v-slot="obj">{{obj.title}}</p> //接受子组件title传值 5555
　　　　　　<Nav>
　　　　</div>
　　　</template>
　　//子组件Nav 绑定在元素上的特性（title="5555"）被称为插槽 prop
　　　<template>
　　　　<div>
　　　　　　<slot title="5555"></slot>//title属性传值：5555
　　　　</div>
　　　</template>