Vue學習筆記 作用域插槽

2022-03-14 00:23:20 字數 1041 閱讀 1912

有時候我們希望子元件的內容由父元件決定如何展示,這個時候子元件的資料父元件並不能訪問到,而作用域插槽的關鍵之處就在於,父元件能接收來自子元件的slot傳遞過來的引數。

<

div

id>

<

cpn>

cpn>

<

cpn>

<

template

slot-scope

="slot"

>

<

span

>}-

span

>

template

>

cpn>

div>

<

template

id="cpn"

>

<

div

style

="display: flex;flex-direction: row"

>

<

slot

:data

="planguage"

>

<

ul>

<

li v-for

="item in planguage"

>}

li>

ul>

slot

>

div>

template

>

body

>

<

script

src=""

>

script

>

<

script

>

const cpn

= }

}=new

vue(

})script

>

在父元件使用我們的子元件時,從子元件中拿到資料:

我們通過獲取到slot屬性

在通過slot.data就可以獲取到剛才我們傳入的data了

lua學習筆記 作用域

塊,作用域 全域性和區域性,預設情況下,為全域性變數,除非特殊說明是區域性 中 do end塊內定義的變數無法被外部訪問,同時任何在外圍定義的區域性變數也無法被內部訪問。強制轉換 根據特定的轉換規則 如果可能的話 將字串轉換成數字,從而在字串和數字之間實現算術運算的過程 這裡先將b轉換成數字,然後再...

Vue作用域插槽

root 父元件呼叫子元件的時候,給子元件傳了乙個插槽 這個插槽叫作用域插槽 作用域插槽必須以 template開頭和結尾 同時這個插槽要宣告 你要從子元件接收的資料都放在哪 這裡是放在props裡面了 還要告訴子元件模板的資訊 即接收的props怎麼展示資料 props tony h4 templ...

Vue作用域插槽

doctype html en utf 8 編譯作用域 title script head isshow cpn div cpn 我是子元件 h2 我是子元件的內容 p isshow 按鈕 button div template newvue components script body html ...