vue的插槽，也就是slot，是元件的一塊html模板，這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。實際上，乙個slot最核心的兩個問題這裡就點出來了，是顯示不顯示和怎樣顯示。
了解vue的同學都知道插槽分為單個插槽，具名插槽，還有作用域插槽，前兩種比較簡單這裡就不贅述了，今天的重點是討論作用域插槽。
簡單來說，前兩種插槽的內容和樣式皆由父元件決定，也就是說顯示什麼內容和怎樣顯示都由父元件決定；但是第三種插槽就不同了，作用域插槽的樣式由父元件決定，內容卻由子元件控制。簡單來說：前兩種插槽不能繫結資料，作用域插槽是乙個帶繫結資料的插槽。
由於vue官方在2.6版本以後改變了插槽的書寫方式，所以，我們這裡區分2.6版本之前的寫法和2.6版本以後的寫法：
我們先來看2.6版本之前的寫法：
// 父元件
//子元件
// 父元件
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 作用域插槽
先看下 就會明白 父元件 import temp from components temp export default data 子元件 template export default 效果 插槽，也就是slot，是元件的一塊html模板，這塊模板顯示不現實 以及怎樣顯示由父元件來決定。插槽模板是...