vue中slot元件的使用

插槽（slot）是vue提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。

slot 是在元件模板中設定的用於在父元件中插入其孫子元件（即自身的子元件）或dom片段的插槽。

匿名solt

子元件中

/*這裡插入父元件在引用子元件內部的內容
*/

父元件中

這是一些初始內容
這是更多的初始內容

最後結果

這是一些初始內容
這是更多的初始內容

當我們要在乙個元件中引入另外乙個元件時，子元件就可以使用slot,父元件則引入子元件的元件名即可。

具名slot

具名slot就是會為模板中不同部分指定相應的插入位置。但是當部分內容沒有找到對應的插入位置，就會依次插入匿名的slot中，

當沒有找到匿名slot時，這段內容就會被拋棄掉。

子元件中

"

header
">
"footer
">

父元件中

lack of anonymous slot, this paragraph will not shown.

"footer
">here comes the footer content
"header
">here comes the header content

最後結果

here comes the header content

here comes the footer content
lack of anonymous slot, this paragraph will not shown.

這是slot的基本用法，其他用法可參考：

更多專業前端知識，請上

【猿2048】www.mk2048.com

vue中slot元件的使用

插槽 slot 是vue提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。slot 是在元件模板中設定的用於在父元件中插入其孫子元件 即自身的子元件 或dom片段的插槽。匿名solt 子元件中 這裡插入父元件在引用子元件...

Vue元件中slot的用法

主要是讓元件的可擴充套件性更強。1.使用匿名slot 定義元件my component 使用方法 我就是slot的替代內容，這裡可以放任何標籤元素 2.給slot加個名字 定義元件my component 使用方法 我就是這個叫myslot的slot替代內容，這裡可以放任意標籤，即使是一長串ul l...

vue元件 使用插槽分發內容 slot

官網api 使用插槽分發內容 使用元件時，有時子元件不知道會收到什麼內容，這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...