vue template中slot-scope/scope的使用方法
在vue 2.5.0+ 中slot-scope替代了 scope
template 的使用情形為，我們已經(jīng)封裝好一個(gè)組建，預(yù)留了插槽，使用 的插槽
首先 我們的創(chuàng)建一個(gè)組建
組建很簡單有一個(gè) slot,slot有兩個(gè)屬性 a=123,b=msg
<template> <div> <div>下面是一個(gè)slot</div> <slot a="123" b="msg" ></slot> </div> </template>
接下來我們引入組建，并使用組建,引入的組建名 為mysolt，并使用組建
然后使用 template ,并使用scope/slot-scope,
<div>
<mysolt>
<template scope="msg">
<div>下面是solt的props 調(diào)用</div>
<div>{{msg}}</div>
<div>{{msg.a}}</div>
<div>{{msg.b}}</div>
</template>
</mysolt>
</div>
渲染圖如下：
其實(shí)就是 template 通過scope/slot-scope 屬性 調(diào)用組建 slot 的屬性，以達(dá)到可以調(diào)用組建屬性實(shí)現(xiàn)復(fù)雜的嵌套；
實(shí)例中 我使用 msg 來重命名 slot 的屬性對象，即 msg 為slot 的{a:'123',b:'msg'}, 就可以通過使用msg 在template 中使用slot的屬性
（注意：當(dāng)前層 如果有data已經(jīng)聲明過 msg,它們之間互不干擾，template 的msg 以slot 的為準(zhǔn)）
如果我給當(dāng)前 data的msg={c:111}，效果圖如下：
<div>{{msg.c}}</div>
<mysolt>
<template scope="msg">
<div>下面是solt的msg</div>
<div>{{msg}}</div>
<div>{{msg.a}}</div>
<div>{{msg.b}}</div>
<div>{{msg.c}}</div>
</template>
</mysolt>
以上這篇vue template中slot-scope/scope的使用方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
創(chuàng)建vue報(bào)錯(cuò)vue-cli Failed to download repo&n
通過vue-cli創(chuàng)建Vue項(xiàng)目時(shí),若遇到連接超時(shí)錯(cuò)誤,可采用離線方式解決,具體操作是下載并解壓vue-templates/webpack到本地.vue-templates目錄,再使用--offline參數(shù)重新執(zhí)行初始化命令2024-09-09
最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁面應(yīng)用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應(yīng)用的方法 ，感興趣的朋友一起看看吧2018-11-11
vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
這篇文章主要為大家詳細(xì)介紹了vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面的實(shí)現(xiàn)代碼
這篇文章主要介紹了this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面,this.$router.push進(jìn)行頁面跳轉(zhuǎn)時(shí)，攜帶參數(shù)有params和query兩種方式，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
Vue項(xiàng)目如何根據(jù)圖片url獲取file對象并用axios上傳
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)圖片url獲取file對象并用axios上傳問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue-router中hash模式與history模式的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Vue-router中hash模式與history模式區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue移動(dòng)端項(xiàng)目緩存問題實(shí)踐記錄
最近在做一個(gè)vue移動(dòng)端項(xiàng)目，被緩存問題搞得頭都大了，積累了一些經(jīng)驗(yàn)，特此記錄總結(jié)下，分享到腳本之家平臺，對vue移動(dòng)端項(xiàng)目緩存問題實(shí)踐記錄感興趣的朋友跟隨小編一起看看吧2018-10-10
為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
Vux是Vue.js的一個(gè)ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-12-12