vue template中slot-scope/scope的使用方法

更新時間：2018年09月06日 10:26:49 作者：v折耳

今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在vue 2.5.0+ 中slot-scope替代了 scope

template 的使用情形為，我們已經(jīng)封裝好一個組建，預(yù)留了插槽，使用的插槽

首先我們的創(chuàng)建一個組建

組建很簡單有一個 slot,slot有兩個屬性 a=123,b=msg

<template>
 <div>
  <div>下面是一個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>

渲染圖如下：

其實就是 template 通過scope/slot-scope 屬性調(diào)用組建 slot 的屬性，以達到可以調(diào)用組建屬性實現(xiàn)復(fù)雜的嵌套；

實例中我使用 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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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