slot--使用插槽分發(fā)內(nèi)容（位置、槽口；作用: 占個(gè)位置）

官網(wǎng)API：?https://cn.vuejs.org/v2/guide/components.html#使用插槽分發(fā)內(nèi)容

使用組件時(shí)，有時(shí)子組件不知道會收到什么內(nèi)容，這是由父組件決定的。

一、單個(gè)插槽

1.my-component 組件: <div><h2>我是子組件的標(biāo)題</h2><slot>只有在沒有要分發(fā)的內(nèi)容時(shí)才會顯示。</slot> </div>2.父組件： <div><h1>我是父組件的標(biāo)題</h1><my-component><p>這是一些初始內(nèi)容</p><p>這是更多的初始內(nèi)容</p></my-component> </div>3.渲染結(jié)果： <div><h1>我是父組件的標(biāo)題</h1><div><h2>我是子組件的標(biāo)題</h2><p>這是一些初始內(nèi)容</p><p>這是更多的初始內(nèi)容</p></div> </div>

二、具名插槽

slot根據(jù)不同的name名稱分發(fā)內(nèi)容，多個(gè)插槽可以有不同的名字。

仍然可以有匿名的默認(rèn)插槽，為了找不到匹配的內(nèi)容片段使用，如果沒有默認(rèn)插槽，這些找不到匹配的內(nèi)容片段將被拋棄。

1.my-component 組件: <div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer> </div>2.父組件：<my-component><h1 slot="header">這里可能是一個(gè)頁面標(biāo)題</h1><p>主要內(nèi)容的一個(gè)段落。</p><p>另一個(gè)主要段落。</p><p slot="footer">這里有一些聯(lián)系信息</p> </my-component>3.渲染結(jié)果： <div class="container"><header><h1>這里可能是一個(gè)頁面標(biāo)題</h1></header><main><p>主要內(nèi)容的一個(gè)段落。</p><p>另一個(gè)主要段落。</p></main><footer><p>這里有一些聯(lián)系信息</p></footer> </div>

三、作用域插槽

作用域插槽是一種特殊類型的插槽，用作一個(gè) (能被傳遞數(shù)據(jù)的) 可重用模板，來代替已經(jīng)渲染好的元素。

1.子組件: <div class="child"><slot text="hello from child"></slot> </div>2.父組件：<div class="parent"><child><template slot-scope="props"><span>hello from parent</span><span>{{ props.text }}</span></template></child> </div>3.渲染結(jié)果： <div class="parent"><div class="child"><span>hello from parent</span><span>hello from child</span></div> </div>

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的vue组件-使用插槽分发内容(slot)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。