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...