1.定義組件
通過父傳子的配置割粮，確實(shí)能夠完成一定的組件內(nèi)容的定制，但是只能完成一些簡單的定制媚污，如果是復(fù)雜的內(nèi)容舀瓢，需要進(jìn)行定制，就需要學(xué)習(xí)了解插槽耗美。
初始參考代碼片段京髓，效果如下圖1
<body>
<div id="app">
<modal></modal>
</div>
<script>
// 定義組件
Vue.component('modal', {
template: `
<div class="modal">
<div class="header">
<h3>警告</h3>
</div>
<div class="main">
<p>您確定要退出本系統(tǒng)?</p>
</div>
<div class="footer">
<button>確認(rèn)</button>
<button>取消</button>
</div>
</div>
`,
})
//vue實(shí)例
const vm = new Vue({
el: '#app',
data: {},
})
</script>
</body>
2.使用插槽的目的：可以幫助我們定制組件的內(nèi)容
slot作用：可以進(jìn)行內(nèi)容的分發(fā)
簡單說就是利用<slot></slot>在組件內(nèi)部占用一個(gè)或者多個(gè)位置航缀，可供組件傳入對應(yīng)的模板代碼進(jìn)去
插槽
1.匿名插槽
只要是沒有具體分配的內(nèi)容，都會給到匿名插槽
<slot></slot>或者<slot name="default"></slot>
（1）直接在modal組件中自定義標(biāo)簽內(nèi)容如<h1>溫馨提示：</h1>朵锣，當(dāng)然此時(shí)可以為任意標(biāo)簽任意內(nèi)容，并且組件可以復(fù)用甸私，效果如下圖2
<div id="app">
<modal>
<h3>警告：</h3>
</modal>
<modal>
<h1>溫馨提示：</h1>
</modal>
</div>
(2)同時(shí)在子組件中需替換為<slot></slot>用于占位诚些，即在modal組件中自定義的內(nèi)容都會顯示在slot占位的位置
【可以參考上方初始代碼對比】
// 定義組件
Vue.component('modal', {
template: `
<div class="modal">
<div class="header">
<slot></slot>
</div>
</div>
`,
})
注意：<slot></slot> 等于 <slot name="default"></slot>
2.具名插槽
指帶有名字的插槽，如果組件內(nèi)需要多個(gè)插槽,因此配置了名字的插槽皇型，才可以實(shí)現(xiàn)定向分發(fā)指定插入.
<slot>元素有一個(gè)特殊的attribute：name诬烹。這個(gè)attribute可以用來定義額外的插槽：
使用步驟：
(1)給插槽起名字<slot name='自定義名字'></slot>
// 定義組件
Vue.component('modal', {
template: `
<div class="modal">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot name="main"></slot>
</div>
<div class="footer">
<slot name="default"></slot>
</div>
</div>
`,
})
(2)在分發(fā)內(nèi)容時(shí)，通過template標(biāo)簽弃鸦，將內(nèi)容包裹绞吁，且里面可以添加任意標(biāo)簽內(nèi)容，并指定分發(fā)的插槽名v-slot：插槽名唬格。
<div id="app">
<modal>
<template v-slot:header>
<h3>警告：</h3>
</template>
<template v-slot:main>
<p>您確定要退出本系統(tǒng)?</p>
</template>
<template v-slot:default>
<button>確認(rèn)</button>
<button>取消</button>
</template>
</modal>
</div>
現(xiàn)在<template> 元素中的所有內(nèi)容都將會被傳入 對應(yīng)的插槽家破。
任何沒有被包裹在帶有v-slot 的 <template> 中的內(nèi)容都會被視為匿名插槽的內(nèi)容。
總結(jié)：
1.具名插槽的內(nèi)容必須使用模板<template></template>包裹
2.<slot></slot> 等價(jià)于 <slot name="default"></slot>
3.vue >=2.6.0版本购岗，使用v-slot替代slot 和 slot-scope
4.v-slot:slotName,slotName不需要加引號""
5.v-slot:header可以簡寫成#header , v-slot:default可以簡寫成#default
作用域插槽
指在定義插槽的同時(shí)汰聋，不論匿名插槽還是具名插槽是可以傳值的。如果子組件中有數(shù)據(jù)喊积，想要在父模板分發(fā)內(nèi)容的時(shí)候使用
通俗講就是父組件需要用到子組件插槽里面數(shù)據(jù)的時(shí)候烹困，通過v-slot:插槽名='自定義對象名'來接收子組件插槽的數(shù)據(jù)
使用步驟：
1.定義插槽的同時(shí)，以添加屬性的方式傳值乾吻。例如：給slot添加屬性btnName等
<slot name="default" btnName1='確認(rèn)' btnName2='取消'></slot>
2.在傳入的template中就可以獲取髓梅，slot傳過來的值，可以直接通過=接收绎签，最終會保存到一個(gè)對象中如scope【scope只是自定義的一個(gè)變量對象名】枯饿，然后通過對象取值即v-slot:插槽名='自定義對象名'
<template v-slot:default='scope'>
<button>{{scope.btnName1}}</button>
<button>{{scope.btnName2}}</button>
</template>
當(dāng)然傳值有時(shí)候是需要?jiǎng)討B(tài)獲取的如：
1.動態(tài)傳值
<slot name="default" :yes='yes' :no='no'></slot>
data() {
return {
yes: '確認(rèn)',
no: '取消'
}
}
同樣通過scope對象接收獲取參數(shù)
<template v-slot:default="scope">
<button>{{scope.yes}}</button>
<button>{{scope.no}}</button>
</template>
