vue插槽使用

2021-10-21 06:03:52 字數 1011 閱讀 7805

1.2插槽      ps:(僅供本人記憶)

1.2.1為什麼要使用插槽?

插槽可以使元件更具備擴充套件性

vue插槽文件

1.2.2插槽的基本使用

給子元件定義乙個插槽:slot元素

父元件在使用子元件時,填充子元件的插槽。在子元件標籤中編寫的html內容,會替換掉子元件的slot元素

可以給中設定預設要展示的內容,如果父元件沒有在子元件中插入任何內容,就預設顯示該內容

1.2.3具名插槽的使用

給子元件中的插槽取乙個名字。給插槽solt元素新增乙個name屬性

父元件往子元件標籤中填充內容時,可以通過slot屬性指定插槽的名字來替換子元件中指定的slot元素

1.2.4作用域插槽的使用

子元件需要在slot元素上繫結乙個自定義屬性。該自定義屬性就是傳遞給父元件的變數

父元件在子元件標籤中編寫template元素,並為它新增v-slot="slotprops"屬性

此時子元件傳遞的變數就存放在slotprops身上了,父元件可以將其展示

1.2.5插槽封裝技巧

在tab-bar元件中,使用slot元素包裹住我們希望被父元件替換掉的元素

父元件使用子元件時可以填充想要的內容

Vue 使用插槽(slot)

當父元件向子元件傳值的時候,有時候,父元件傳的並不是單純的數值 字串,有可能是帶標籤 dom 的資料,那麼如何傳值呢?如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...

牛!vue插槽使用

1 分為匿名插槽,具名插槽,作用域插槽。2 先宣告乙個在slt.vue這個乙個元件元件中定義。注意 這裡say是自定義的,只在該插槽中有用。在引用元件中使用作用域插槽slot scope讀取這個屬性值hello。footer 在另外乙個元件中引用這個元件 for a guide and recipe...

vue插槽的使用

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