但是我們開發過程中經常會碰到這麼乙個情況,引用子元件以後,我還想要在父元件使用子元件的時候,靈活地改變子元件裡面的內容。
譬如,子元件裡面原本定義了乙個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 得到的頁面效果如下...