使用-slot-分發內容 官方api位址
我對solt的理解是當元件中某一項需要單獨定義,那麼就應該使用solt。 舉例說明。例如專案中需要乙個模態框提示 付款成功,付款失敗。那麼這個模態框也就僅僅差這幾個字或者是狀態而已。那麼此時應用solt就是乙個非常不錯的選擇。
除非子元件模板包含至少乙個插口,否則父元件的內容將會被丟棄。當子元件模板只有乙個沒有屬性的 slot 時,父元件整個內容片段將插入到 slot 所在的 dom 位置,並替換掉 slot 標籤本身。
最初在標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。12
3456
78910
1112
1314
1516
1718
19
>
子元件內部元素
渲染結果為
我們發現寫在 children模板內部的span被預設刪除了。如果想讓span顯示那麼此刻就應該使用slot。12
3456
78910
1112
1314
1516
1718
>
子元件內部元素
那麼此時span標籤的內容就被渲染出來了。如果在childrem中如果不寫span標籤那麼slot缺省會渲染slot裡面的內容
上面案例中講解的是當元件的模板中有乙個slot的方法,那麼乙個元件中如果想使用多個slot那麼此時就應該使用具名slot。
元素可以用乙個特殊的屬性
name
來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應slot
特性的元素。
仍然可以有乙個匿名 slot ,它是預設 slot ,作為找不到匹配的內容片段的備用插槽。如果沒有預設的 slot ,這些找不到匹配的內容片段將被拋棄。12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
29
>
這個是預設的沒有具名的solt
渲染結果為
Vue之slot內容分發
內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示,就是slot分發負責的活。可以將父元件放在子元件的內容,放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...
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 插槽 在父元件...