vue slot插槽的使用

slot插槽的使用場景

父元件向子元件傳遞dom時會用到插槽

作用域插槽：當同乙個子元件想要在不同的父元件裡展示不同的狀態，可以使用作用域插槽。展示的狀態由父元件來決定

注：想要修改父元件向子元件傳遞的元素的樣式時，只能在對應的子元件進行修改

1.具名插槽的使用

父元件

slot="header">

我是頭部

子元件

header">

2.作用域插槽的使用1

父元件

slot-scope="props">

}子元件

3.作用域插槽的使用2

父元件

slot-scope="props">}}

子元件

姓名年齡

item of data" :item=item>

2.作用域插槽的使用

vue slot插槽的使用

vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容，位於子元件內部 渲染結果 這裡是子元件，注意 沒有加入slot標籤哦！上面的 實際效果如下 這裡是父元件 這裡是子元件，注意 沒...

Vue slot 插槽的使用

slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...

Vue slot插槽的使用

lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...