作用
父元件向子元件傳遞內容
插槽位置
具名插槽定義 就是有名字的插槽vue.
component
('alert-box'
,)
定義
內容name
="header"
>
slot
>
沒有名稱的話就匹配到沒有name屬性的插槽中solt
="header"
>
內容h1
>
還可以使用template標籤進行使用
template只是暫時包裹要顯示的內容,可以包裹多個,它不會顯示在頁面中
使用兩個相同具有相同名稱的slot可以顯示在頁面中 name這個有什麼用???
作用域插槽
應用場景:父元件對子元件的內容進行加工處理
插槽定義
v-bind:item繫結的資料是要給父元件用的>
v-for
="item in list"
v-bind:key
="item.id"
>
v-bind:item
="item"
>
}slot
>
li>
ul>
插槽內容
v-bind:list="list"是為了讓子元件可以使用父元件中的值 子元件中有props[『list』]
slot-scope可以得到子元件中繫結屬性的那個資料v-bind:list
="list"
>
slot-scope
="soltprops"
>
v-if
="slotprops.item.current"
>
}strong
>
template
>
fruit-list
>
//插槽(匿名插槽) 只需要傳遞一塊內容
//具名
還是插槽
插槽中要使用變數資料
變數資料來自於子元件內部
}
Vue元件插槽
三 具名插槽 命名插槽 補充當我們使用vue元件時,常常遇到子元件的部分布局在不同的路由元件上表現不同的情況,vue為了幫助我們開發者解決這個問題,新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用,內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內,需要多個插槽時,需...
Vue元件化之插槽
類似電腦的usb,使用介面給電腦增加不同的功能,鍵盤 音響,而不是直接在元件裡新增 介紹 預設自定義標籤內不允許新增內容,而插槽可以讓我們在內部新增內容 封裝方法 抽取共性,保留不同。使用方法 直接在template中插入slot空標籤,即可在自定義標籤中插入內容,內容會自動替換空slot 元件標籤...
vue的元件化開發(元件通訊,插槽,遞迴元件)
1.vue元件的通訊 包括子通父,父通子,兄弟通訊,祖代與後代通訊,vuex全域性狀態管理。1.1 父向子通訊 props屬性和refs屬性。1.1.1 props屬性 在子元件中 props age1 number,string 存在多種型別。在父元件中 1.1.2 refs屬性 通過this.r...