資料來自：具名-slot
在官方文件的基礎上，更加細緻的講解**。
標籤中的任何內容都被視為備用內容，只有在宿主元素為空，它才顯示。
除非子元件模板包含至少乙個插口，否則父元件的內容將丟棄。
<body
>
<
div
id>
<
h1>我是父元件的標題
h1>
<
my-component
>
<
p>這是一些初始內容
p>
<
p>這是更多的初始內容
p>
my-component
>
div>
<
script
src="js/vue.min.js"
>
script
>
<
script
>
newvue(}})
script
>
body
>
slot 可以有不同的名字。具名 slot 將匹配內容片段中所對應slot特性。
將對應的父元件巢狀到 具名 slot 的子元件 位置 的元素展示出來。
<>
<
h1 slot
="header"
>這裡可能是乙個頁面標題
h1>
<
p>主要內容的乙個段落。
p>
<
p>另乙個主要段落。
p>
<
p slot
="footer"
>這裡有一些聯絡資訊
p>
>
<
script
src="js/vue.min.js"
>
script
>
<
script
>
newvue(}})
posted @
2017-06-16 01:51
tang丶有年 閱讀(
...)
編輯收藏
vuejs元件之slot內容分發例項詳解
slot分發內容 概述 簡單來說，假如父元件需要在子元件內放一些dom，那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示，就是slot分發負責的活。預設情況下 父元件在子元件內套的內容，是不顯示的。例如 顯示內容是乙個button按鈕，不包含span標籤裡面的內容 單個slot 簡單來說，只使...
vue元件 使用插槽分發內容 slot
官網api 使用插槽分發內容 使用元件時，有時子元件不知道會收到什麼內容，這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...
VUE 元件（三）使用slot分發內容
當需要讓元件組合使用，混合父元件的內容與子元件的模板時，就會用到sloat,這個過程叫做內容分發。props傳遞資料，events觸發事件，sloat分發內容，就構成了vue元件的3個api 一 slot的用法 單個slot 在子元件內使用特殊的元素就可以為這個子元件開啟乙個slot 插槽 在父元件...