vue 作用域插槽

2021-10-05 23:52:01 字數 804 閱讀 2459

先看下 ** 就會明白

父元件

}

import temp from '../components/temp'

export default ,

data () ,,]

}},

子元件:

template>

export default ;

},

效果:

插槽,也就是slot,是元件的一塊html模板,這塊模板顯示不現實、以及怎樣顯示由父元件來決定。

插槽模板是slot,它是乙個空殼子,因為它顯示與隱藏以及最後用什麼樣的html模板顯示由父元件控制。但是插槽顯示的位置由子元件自身決定,slot寫在元件template的哪塊,父元件傳過來的模板將來就顯示在哪塊。這樣就使元件可復用性更高,更加靈活。我們可以隨時通過父元件給子元件加一些需要的東西。

作用域插槽其實就是帶資料的插槽。當乙個元件需要重複使用時可以用到;

原來父元件可以通過繫結資料傳遞給子元件。作用域插槽就可以通過子元件繫結資料傳遞給父元件。

slot-scope就相當於是乙個物件,這個物件裡面的資料就是子元件插槽繫結傳上來了。

作用域插槽適合的場景是至少包含**以上的元件層級,是一種優秀的元件化方案!

作用域插槽是一種特殊型別的插槽,用作乙個 (能被傳遞資料的) 可重用模板,來代替已經渲染好的元素

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 ...

vue作用域插槽

首先,在 2.6.0 中,我們為具名插槽和作用域插槽引入了乙個新的統一的語法 即v slot指令 它取代了slot和slot scope這兩個目前已被廢棄但未被移除且仍在文件中的 attribute。匿名插槽,具名插槽都好理解,作用域插槽看了文件,感覺還是有點暈,記錄下。大概就是使用作用域插槽,父元...