定义好一个组件，如果想插入图片或视频这非常不好的控制应该显示什么，这个时候可以使用插槽插入自定义内容
默认插槽
<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拿值
