官網api： 使用插槽分發內容
使用元件時，有時子元件不知道會收到什麼內容，這是由父元件決定的。
1.my-component 元件:
<
div>
<
h2>我是子元件的標題
h2>
只有在沒有要分發的內容時才會顯示。
div>
2.父元件：
<
div>
<
h1>我是父元件的標題
h1>
這是一些初始內容
這是更多的初始內容
div>
3.渲染結果：
<
div>
<
h1>我是父元件的標題
h1>
<
div>
<
h2>我是子元件的標題
h2>
這是一些初始內容
這是更多的初始內容
div>
div>
slot根據不同的name名稱分發內容，多個插槽可以有不同的名字。
仍然可以有匿名的預設插槽，為了找不到匹配的內容片段使用，如果沒有預設插槽，這些找不到匹配的內容片段將被拋棄。
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"
>這裡可能是乙個頁面標題
h1>
<
p>主要內容的乙個段落。
p>
<
p>另乙個主要段落。
p>
<
p slot
="footer"
>這裡有一些聯絡資訊
p>
my-component
>
3.渲染結果：
<
div
class="container"
>
<
header
>
<
h1>這裡可能是乙個頁面標題
h1>
header
>
<
main
>
<
p>主要內容的乙個段落。
p>
<
p>另乙個主要段落。
p>
main
>
<
footer
>
<
p>這裡有一些聯絡資訊
p>
footer
>
div>
作用域插槽是一種特殊型別的插槽，用作乙個 (能被傳遞資料的) 可重用模板，來代替已經渲染好的元素。
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
>}
span
>
template
>
child
>
div>
3.渲染結果：
<
div
class="parent"
>
<
div
class="child"
>
<
span
>hello from parent
span
>
<
span
>hello from child
span
>
div>
div>
更多專業前端知識，請上
【猿2048】www.mk2048.com
VUE 元件（三）使用slot分發內容
當需要讓元件組合使用，混合父元件的內容與子元件的模板時，就會用到sloat,這個過程叫做內容分發。props傳遞資料，events觸發事件，sloat分發內容，就構成了vue元件的3個api 一 slot的用法 單個slot 在子元件內使用特殊的元素就可以為這個子元件開啟乙個slot 插槽 在父元件...
Vue元件插槽
三 具名插槽 命名插槽 補充當我們使用vue元件時，常常遇到子元件的部分布局在不同的路由元件上表現不同的情況，vue為了幫助我們開發者解決這個問題，新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用，內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內，需要多個插槽時，需...
vue 元件中solt 插槽使用
官方教程 如果現在事先模板中不知道需要什麼內容,需要在使用時傳遞 就可以使用插槽with來實現,這種效果 類似thinkphp中的模板繼承 的block標籤的功能 顧名思義就是沒有名字的插槽,匿名插槽只能有乙個 其他內容 匿名插槽 預設內容 其他內容 實名插槽可以有多個,在使用時必須使用name屬性...