vuejs元件之slot內容分發例項詳解

2021-08-08 20:55:04 字數 474 閱讀 4585

slot分發內容

①概述:

簡單來說,假如父元件需要在子元件內放一些dom,那麼這些dom是顯示、不顯示、在哪個地方顯示、如何顯示,就是slot分發負責的活。

②預設情況下

父元件在子元件內套的內容,是不顯示的。

例如**:

顯示內容是乙個button按鈕,不包含span標籤裡面的內容;

③單個slot

簡單來說,只使用這個標籤的話,可以將父元件放在子元件的內容,放到想讓他顯示的地方。

例如這樣寫的話,結果是:

12345為了明確作用範圍,所以使用button標籤

即父元件放在子元件裡的內容,插到了子元件的位置;

注意,即使有多個標籤,會一起被插入,相當於用父元件放在子元件裡的標籤,替換了這個標籤。

Vuejs 元件 標籤分發內容

資料來自 具名 slot 在官方文件的基礎上,更加細緻的講解 標籤中的任何內容都被視為備用內容,只有在宿主元素為空,它才顯示。除非子元件模板包含至少乙個插口,否則父元件的內容將丟棄。body div id h1 我是父元件的標題 h1 my component p 這是一些初始內容 p p 這是更多...

Vue之slot內容分發

內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示,就是slot分發負責的活。可以將父元件放在子元件的內容,放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...

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

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