定義好一個(gè)組件，如果想插入圖片或視頻這非常不好的控制應(yīng)該顯示什么，這個(gè)時(shí)候可以使用插槽插入自定義內(nèi)容

默認(rèn)插槽

  <Login><template><h1>我是插入的內(nèi)容</h1></template></Login >

組件

  <slot></slot><!--插入內(nèi)容的占位符-->
<button @click="login">登錄</button>

---

具名插槽

帶名字的插槽，上面寫法適合插入一個(gè)內(nèi)容的寫法，這種寫法可以插入多個(gè)內(nèi)容

適合插入多個(gè)內(nèi)容

<slot name="top"></slot><!--插入內(nèi)容的占位符-->
<button @click="login">登錄</button><slot name="foot"></slot>

< template v-slot:foot > 另一種寫法

 <Login><template><h1 slot="top">我是上面的內(nèi)容</h1><h1>我沒有寫SLOT不會(huì)顯示,有兩個(gè)插槽Vue不知道該放哪個(gè)合適</h1><h1 slot="top">我會(huì)追加</h1><h1 slot="foot">我是底部</h1></template></Login>

---

作用域插槽

作用域插槽可以從子組件返回?cái)?shù)據(jù)給插槽使用者

子組件

   <slot :list="userList"></slot><!-- 把用戶列表傳給插槽使用者  :后端名字可以自定義  等號(hào)后為傳的數(shù)據(jù) -->

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

插槽所有者

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

可以通過getList.id拿值