Vue 插槽的使用

2022-03-14 09:45:46 字數 588 閱讀 1839

專案中具名插槽使用的較多。

封裝的通用提示元件,如:

上圖截的是登出提示,有的時候不同的情況下提示元件的提示內容不一樣,這就要根據具體情況更改

元件中的text內容:

首先父元件使用prompt子元件:

// 在向具名插槽提供內容的時候,我們可以在乙個元素上使用v-slot指令,並以v-slot的引數的形式提供其名稱:

確定登出嗎?

子元件prompt:

登出          

x// 在子元件中使用slot進行站位,name就是父元件中定義的name

確定

這時子元件就會被渲染為:span就會被渲染進去

vue插槽使用

1.2插槽 ps 僅供本人記憶 1.2.1為什麼要使用插槽?插槽可以使元件更具備擴充套件性!vue插槽文件 1.2.2插槽的基本使用 給子元件定義乙個插槽 slot元素 父元件在使用子元件時,填充子元件的插槽。在子元件標籤中編寫的html內容,會替換掉子元件的slot元素 可以給中設定預設要展示的內...

vue插槽的使用

什麼是插槽?插槽 slot 是 vue 提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,且具有模組化的特質和更大的重要性,插槽顯不顯示 怎樣顯示是由父元件來控制的,而插槽在 顯示就由子元件來進行控制 用 slot 元素將不同的dom 樹組合在一起,s...

vue插槽的使用

父元件 父元件 呼叫子元件 color red 我預設插槽內容 p slotone1 div 子元件 vue.component soltonel 乙個元件中只能有乙個預設插槽。相對應的,具名插槽就可以有很多個,只要名字 name屬性 不同就可以了 父元件 父元件 呼叫子元件 footer styl...