Vue 插槽 组件插入不固定内容

定义好一个组件，如果想插入图片或视频这非常不好的控制应该显示什么，这个时候可以使用插槽插入自定义内容

默认插槽

  <Login><template><h1>我是插入的内容</h1></template></Login >

组件

  <slot></slot><!--插入内容的占位符-->
<button @click="login">登录</button>

---

具名插槽

带名字的插槽，上面写法适合插入一个内容的写法，这种写法可以插入多个内容

适合插入多个内容

<slot name="top"></slot><!--插入内容的占位符-->
<button @click="login">登录</button><slot name="foot"></slot>

< template v-slot:foot > 另一种写法

 <Login><template><h1 slot="top">我是上面的内容</h1><h1>我没有写SLOT不会显示,有两个插槽Vue不知道该放哪个合适</h1><h1 slot="top">我会追加</h1><h1 slot="foot">我是底部</h1></template></Login>

---

作用域插槽

作用域插槽可以从子组件返回数据给插槽使用者

子组件

   <slot :list="userList"></slot><!-- 把用户列表传给插槽使用者  :后端名字可以自定义  等号后为传的数据 -->

 data() {return {userList: [{id:101,name:'dpc'}, {id:102,name:'cyy'}]}    }

插槽所有者

 <User><template slot-scope="getList"><!--getList可以不用和子组件一样-->{{getList}}</template></User>

可以通过getList.id拿值