Vue基礎 渲染函式 插槽

2022-03-03 09:37:29 字數 1940 閱讀 6794

vue 測試版本：vue.js v2.5.13

先看個插槽的例子：

<


div 


id>


<


child 


>


<


span 


slot-scope


="props"


>


} 


span


>


child


>


div>



window.onload = function


() );


newvue(;
最終效果:

應該比較好理解，如果換成渲染函式，js 就是這樣：

window.onload = function


() );


return createelement('div',[vnodes1]);


}});


newvue(;
前後比較對照下，結合文件，應該能看懂；

但是插槽有很多種形式，具名與否，作用域與否等等，綜合在一起，做了個 demo，**如下：

<


div 


id>


<


myele


>


<


div>


default slot


div>


<


div 


slot


="header"


>


header


div>


<


div 


slot-scope


="props"


slot


="footer"


>


<


div>footer from parent!


div>


<


div>}


div>


div>


myele


>


<


child


>


<


span 


slot-scope


="props"


>


} 


span


>


child


>


div>
如果依舊用 template ，js 就是這樣：

window.onload = function


() }


` });


vue.component('child', );


return createelement('div', [vnodes1]);


}});


newvue(;
效果圖：

如果用渲染函式實現，就是這樣：

window.onload = function


() ),


vnodes4 = createelement('child', 


}});


return createelement('div', [vnodes0, vnodes1, vnodes2, vnodes3, vnodes4]);


}});


vue.component('child', );


return createelement('div', [vnodes1]);


}});


newvue(;
兩邊一對照，結合文件，應該就比較清楚了

插槽使用插槽分發內容

vue插槽樣式 vue基礎之插槽

categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名，第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...

vue插槽基礎 vue外掛程式封裝

1.預設插槽 當你只需要插入一處額外的內容 封裝元件 class bread separator to 首頁el breadcrumb item slot el breadcrumb item el breadcrumb div template export default script scop...

vue 渲染函式處理slot vue 渲染函式

v if template 中配合 v if 條件渲染一整組 paragraph one paragraph two 使用v else 指令來表示 v if 的 else，v else 元素必須緊跟在 v if 或者 v else if元素的後面，否則它將不會被識別 多次使用 v if 如圖所示 通...