手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3組件插槽使用

發布時間:2023-04-17 16:35:21???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

學習要點:
1.插槽使用
本節課我們來開始學習 Vue3.x 的組件插槽的使用方法。
一.插槽使用
1. 組件中有一些高級的小功能,比如:插槽,可以實現內容的動態分發;
2. 有時,我們需要在組件模板中定義大量重復的內容區域,可以用插槽來避免重復;
3. 首先,我們先看下如下代碼中的場景:
<div id="app">
<html-a>html-a>
<html-a>html-a>
<html-a>html-a>
<html-a>html-a>
div>
// 模板
template : `
{{message}}
****
PS:這里有四個,我們希望輸出內容時,增加不同的符號,現有知識只能同一符號;
4. 如果可以在內部輸入不同的符號內容,通過某種機制(插槽)來實現排版:
<div id="app">
<html-a>****html-a>
<html-a>@@@@html-a>
<html-a>####html-a>
<html-a>!!!!html-a>
div>
PS:這里被組件元素包含的內容,并不會真正被渲染,會直接被忽略掉;
5. 通過插值來分發組件內部包含的內容,具體如下:
// 模板
template : `
{{message}}
6. 如果組件元素中沒有內容,也可以通過插槽提供一個默認值;
<html-a>html-a>
0000
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕