Vue Slot(插槽 2019 03更新

2021-08-08 22:02:21 字數 940 閱讀 7796

一般而言,我們元件的結構都是預先寫好的。

但是我們開發過程中經常會碰到這麼乙個情況,引用子元件以後,我還想要在父元件使用子元件的時候,靈活地改變子元件裡面的內容。

譬如,子元件裡面原本定義了乙個ul,然後使用v-for的方式遍歷li裡面的span內容。

此時,如果我們在子元件的li裡面如果是乙個slot,便可以很輕鬆地替換span為其他內容。

>

>

v-for

="(item,list) in list"

:key

="`item_$`"

>

:number

="item.number"

>

slot

>

li>

ul>

template

>

>

export

default}}

;script

>

>

>

:list

="list"

>

slot-scope

="count"

:value

="count.number"

/>

list

>

div>

template

>

>

export

default,]

}}};

script

>

這裡需要說明一下,slot-scope這個屬性可以隨便取乙個值,它表示的是子元件list裡面的slot外掛程式的一些屬性集合起來的物件,我們可以使用count.number獲得slot外掛程式上的number屬性。

vue slot插槽理解

新手上路,根據vue官方手冊記錄學習內容,主要知識點如下.插槽是用於向子元件分發內容的,當在父元件中應用子元件時,子元件標籤內的內容會分發到子元件模板中具有slot標籤的位置.如果子元件模板中沒有slot標籤,父元件裡子元件標籤內的內容會全部被丟棄掉的.原始碼 id model 我是model元件的...

vue slot插槽的使用

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

Vue slot 插槽的使用

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