詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
組件傳參
通過(guò)給組件傳遞參數(shù), 可以讓組件變得更加可擴(kuò)展, 組件內(nèi)使用props接收參數(shù)
export default {
props: ['options'],
data(){
return {}
}
}
但是這個(gè)方法有局限性, 例如我寫(xiě)了一個(gè)對(duì)話框組件, 對(duì)話框的內(nèi)容是自定義的
如果我只是顯示文字的話, 我可以簡(jiǎn)單的將字符串傳進(jìn)去props: ['message']
但是如果需要在其中添加一個(gè)按鈕的話, 這種方法就顯得很笨重了, 所以我們用另一種辦法 插槽
slot 插槽
slot的使用就像它的名字一樣, 在組件內(nèi)定義一塊空間, 取名為slotA
<div class="dialog"> 我是對(duì)話框 <slot name="slotA"></slot> </div>
在組件外, 我們可以往插槽里填入任何元素, dialog-a為組件的名稱(chēng)
<dialog-a :options="hello"> <template slot="slotA"> <button>按鈕</button> // ... 可以是任何元素 </template> </dialog-a>
slot-scope 獲取插槽作用域
前面講的只是實(shí)現(xiàn)往組件內(nèi)加入元素, 但是并沒(méi)有和組件的數(shù)據(jù)有任何的交互
slot-scope的作用就是把組件內(nèi)的碼農(nóng)之家數(shù)據(jù)帶出來(lái)
<div class="dialog">
我是對(duì)話框<br>
{{message}}
<slot name="slotA" :message="message"></slot>
</div>
在組件外就可以得到其中的message
<dialog-a :options="hello">
<template slot="slotA" slot-scope="scope">
<button>{{scope.message}}</button>
</template>
</dialog-a>
ref 調(diào)用組件內(nèi)的方法
使用this.$refs找到組件后, 就可以調(diào)用其中methods中的方法
<dialog-a ref="dialogA"></dialog-a>
test(){
this.$refs.dialogA.func()
}
相關(guān)文章
Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vuex進(jìn)行Echarts數(shù)據(jù)頁(yè)面初始化后如何更新dom
這篇文章主要為大家詳細(xì)介紹了使用Vuex做Echarts數(shù)據(jù)時(shí),當(dāng)頁(yè)面初始化后如何更新dom,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫(xiě)了一個(gè)本地服務(wù)編譯成exe程序,在electron程序啟動(dòng)后,自動(dòng)執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
基于vue+canvas的excel-like組件實(shí)例詳解
a vue component，基于vue的表格組件，主要解決大數(shù)據(jù)量的表格渲染性能問(wèn)題，使用canvas繪制表格，同時(shí)支持類(lèi)似excel的批量選中，復(fù)制黏貼刪除，實(shí)時(shí)編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下2017-11-11