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值的內容就會被拋棄。?

?

?

　　

　　

　　

轉載于:https://www.cnblogs.com/clicklin/p/9389892.html

總結

以上是生活随笔為你收集整理的vue之slot用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。