一、什么是插槽
官方解釋：Vue 實作了一套內容分發的 API，將 <slot> 元素作為承載分發內容的出口，
大白話：插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽，
二、基本用法
1、在子組件中放一個占位符
<template> <div> <div>我是子組件</div> <div> <slot></slot> </div> </div> </template>
2、在父組件中給這個占位符填充內容
<template> <div> <childTest> <p>我就測驗一下插槽的</p> </childTest> </div> </template> <script> import childTest from './ChiledTests' export default { components:{ childTest } } </script>
效果：
三、具名插槽的使用
描述：具名插槽其實就是給插槽取個名字，一個子組件可以放多個插槽，而且可以放在不同的地方，而父組件填充內容時，可以根據這個名字把內容填充到對應插槽中，
代碼如下：
1、子組件代碼
<slot> 元素特殊的 attribute：name屬性，設定對應的插槽名稱
一個不帶name屬性的<slot>元素的出口實際默認的name值是default
<template> <div> <div>我是子組件</div> <div> <slot></slot> </div> <div> <slot name="header"></slot> </div> </div> </template>
2、父組件使用
在一個 <template> 元素上使用 v-slot 指令，并以v-slot:[name]的形式提供其名稱：
注意：v-slot只能添加在<template> 上 (除非下面第3點中的情況)
template> <div> <childTest> <p>我就測驗一下插槽的</p> <template v-slot:header><h1>我是標題哦</h1></template> </childTest> </div> </template> <script> import childTest from './ChiledTests' export default { components:{ childTest } } </script>
效果：
3、當被提供的內容只有默認插槽時，組件的標簽才可以被當作插槽的模板來使用，這樣我們就可以把 v-slot 直接用在組件上：
子級：
<template> <div> <div>我是子組件</div> <slot :userObj2="user"></slot> </div> </div> </template>
父級：
<template> <div> <childTest v-slot:default="{ userObj2 }"> {{userObj2}} </childTest> </div> </template> <script> import childTest from './ChiledTests' export default { components:{ childTest } } </script>
四、作用域插槽
平時用的比較多的可能就是這個；作用域插槽：將只能在子組件訪問的資料傳遞出去，父組件呼叫子組件時可以通過設定的引數訪問到在子組件的資料（個人理解——類似于父子級之間的傳值props傳值）
1、子組件傳遞引數——將需要傳遞出去的資料，通過一個自定義的屬性系結上去v-bind:[data]=”data”
<template> <div> <div>我是子組件</div> <div> <slot></slot> </div> <div> <slot name="header"></slot> </div> <div> <slot name="content" :userObj="user"></slot> </div> </div> </template>
2、父組件接受傳遞出來的引數
父組件通過v-slot:[name]=”自定義data引數名”,name為<slot>具名引數的名稱，默認為default,這里為了與默認的插槽區分，定義為content
<template> <div> <childTest> <p>我就測驗一下插槽的</p> <template v-slot:header><h1>我是標題哦</h1></template> <template v-slot:content="useDate"> <p>{{useDate.userObj.name}}</p> </template> </childTest> </div> </template> <script> import childTest from './ChiledTests'
效果：
五、解構插槽 Prop
作用域插槽的內部作業原理是將你的插槽內容包裹在一個擁有單個引數的函式里；所以上面例子的父級組件中要獲取到name屬性——userDate.userObj.name
但是我們也可以通過解構復制來使獲取到的資料更為簡潔；
<template v-slot:content="{ userObj }"> <p>{{userObj.name}}</p> </template>
尤其是在該插槽提供了多個引數 的時候，它同樣開啟了引數重命名等其它可能，例如將 userObj重命名為personObj：
<template v-slot:content="{ userObj: personObj }"> <p>{{personObj.name}}</p> </template>
效果和上面一樣，
參考自：
1、https://www.cnblogs.com/mandy-dyf/p/11528505.html
2、https://cn.vuejs.org/v2/guide/components-slots.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/238449.html
標籤：JavaScript
上一篇：console.log(typeof null)//object
下一篇：js數值進制