vue之slot用法
阿新 • • 發佈：2018-07-30
highlight port one scrip 用法 har component 技術 src slot元素作為組件模板之中的內容分發插槽。這個元素自身將被替換。
有 name 特性的 slot 稱為具名 slot。 有 slot 特性的內容將分發到名字相匹配的具名 slot。
一、單個組件
如果子組件的模板不包含 slot，那麽父組件的內容就會被拋棄 父組件內容<template>
<div>
<child>若子組件沒有slot，則這句話不會顯示</child>
</div>
</template>
<script>
import Child from ‘./Child.vue‘
export default {
name: ‘HelloWorld‘,
components:{
‘child‘:Child
}
}
</script>
子組件內容
<template> <div> <h1>我是子組件</h1> </div> </template>
瀏覽器顯示
因為子組件沒有<slot> 元素，所以父組件的內容被拋棄，現在我們在子組件加上<slot> 元素
<template> <div> <h1>我是子組件</h1> <slot></slot> </div> </template>
此時瀏覽器顯示
此時，父組件的內容就顯示在了子組件的內容裏了。
二、具名slot
上面案例中講解的是當組件的模板中有一個slot的方法，那麽一個組件中如果想使用多個slot那麽此時就應該使用具名slot。
父組件內容
<template>
<child>
<h1 slot="h1">標題一</h1>
<h2 slot="h2">標題二</h2>
<h3>標題三</h3>
</child>
</template>
<script>
import Child from ‘./Child.vue‘
export default {
components:{
‘child‘:Child
}
}
</script>
子組件內容
<template> <div> <h1>我是子組件</h1> <slot name="h1"></slot> <slot name="hh"></slot> <slot></slot> </div> </template>
瀏覽器顯示
分析：子組件中的slot有name屬性，與父組件的slot的值相對應，那麽就會匹配到，若子組件中slot有name屬性，但父組件沒有與之相對的slot的值，則會被拋棄掉。父組件沒有slot值的內容則會顯示在默認的slot中。如果子組件中沒有默認的slot,父組件沒有slot值的內容就會被拋棄。
vue之slot用法