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

vue3具名插槽和作用域

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

學習要點:
1.具名插槽
2.作用域問題
本節課我們來開始學習 Vue3.x 的組件插槽的名稱設置和作用域問題。
一.具名插槽
1. 具名插槽也就是給插槽起一個名字,然后調用對應的內容,而其它則被忽略;
<div id="app">
<html-a>****html-a>
<html-a v-slot:header>headerhtml-a>
div>
// 模板
template : `
{{message}}
`
PS:具名插槽的好處不言而喻了,可以有效控制各種復雜的布局和內容展示;
PSv-slot 也支持縮寫方案,用#號代替即可;
<html-a #header>headerhtml-a>
二.作用域問題
1. 用于作用域的問題,插槽內的值是無法獲取到子組件 data 屬性的內容的;
<html-a>{{message}}html-a>
PS:這里的{{message}}到底是子組件的 message 還是父組件的 message?
2. 為了解決這個問題,插槽提供了 v-slot:default 方案來處理,具體如下:
<html-a v-slot:default="slotProps">
{{slotProps.message}}
html-a>
template : `
{{message}}
v-bind:message="message">
PS:這里命名會有誤導性,這里的 slotProps 是可以自定義的,下面左邊的 message 自定義;
PS:如果改為 v-bind:abc,那么調用就是:slotProps.abc 即可;
3. 下面是作用域插槽的一些簡寫,具體如下:
<html-a v-slot="slotProps">
{{slotProps.message}}
html-a>
4. 使用 ES6+的解構語法,更加方便,具體如下:
<html-a v-slot="{message}">
{{message}}
html-a>
//
<html-a v-slot="{message : info}">
{{info}}
html-a>
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

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

? 電話咨詢

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

? 微信咨詢

掃碼關注
點點租

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