vue slot內容分發

2022-06-12 17:09:13 字數 766 閱讀 3635

當需要讓元件組合使用,混合父元件的內容和子元件的模板的時候,就會用到slot。這個過程就叫內容分發。

最為常用的是兩種slot:一種是匿名slot, 一種是具名slot。

匿名 很好理解: 就是預設,沒有名字。 具名: 就是slot 有了name屬性,有了名字。

下面來個綜合的小demo:

父元件:

我是testslot:父元件

balabala

[email protected]

ppppppppppppppp

????

然後再slot1這個子元件中:(這個測試的是匿名slot)

我是slot1元件

在slot2這個元件當中:

index  

可以看到效果如下:

理解: 在父元件當中,遇到子元件中 如果還有元素,基本就是開始slot了,然後就可以看那個子元件中對這個slot的呼叫了。

還需注意的一點是:

可以通過$slot.name訪問某個具名slot, $slot 可以訪問所有匿名slot,$slots 在業務中幾乎用不到 , 在用 render 函式建立元件時會比較有用。

Vue之slot內容分發

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

CDN 內容分發網路

一 何為cdn?cdn的全稱是content delivery network,即內容分發網路。其基本思路是盡可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快 更穩定。通過在網路各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智慧型虛擬網路,cdn系統能夠實時地...

Vuejs 元件 標籤分發內容

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