詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
組件傳參
通過(guò)給組件傳遞參數(shù), 可以讓組件變得更加可擴(kuò)展, 組件內(nèi)使用props接收參數(shù)
export default {
props: ['options'],
data(){
return {}
}
}
但是這個(gè)方法有局限性, 例如我寫(xiě)了一個(gè)對(duì)話(huà)框組件, 對(duì)話(huà)框的內(nèi)容是自定義的
如果我只是顯示文字的話(huà), 我可以簡(jiǎn)單的將字符串傳進(jìn)去props: ['message']
但是如果需要在其中添加一個(gè)按鈕的話(huà), 這種方法就顯得很笨重了, 所以我們用另一種辦法 插槽
slot 插槽
slot的使用就像它的名字一樣, 在組件內(nèi)定義一塊空間, 取名為slotA
<div class="dialog"> 我是對(duì)話(huà)框 <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ì)話(huà)框<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倉(cāng)庫(kù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue3項(xiàng)目中引入html頁(yè)面的方法舉例
這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中引入html頁(yè)面的相關(guān)資料,Vue3是一個(gè)JavaScript框架,通常我們使用它來(lái)構(gòu)建單頁(yè)應(yīng)用程序(SPA),如果你想在HTML頁(yè)面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下2023-09-09
Vue項(xiàng)目動(dòng)態(tài)加載圖片正確寫(xiě)法
最近做項(xiàng)目的時(shí)候遇到了動(dòng)態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目動(dòng)態(tài)加載圖片的正確寫(xiě)法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue 使用高德地圖vue-amap組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
vue-router判斷頁(yè)面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)的方法示例
這篇文章主要介紹了vue-router判斷頁(yè)面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)的方法示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue3封裝一個(gè)帶動(dòng)畫(huà)的關(guān)閉按鈕示例詳解
這篇文章主要為大家介紹了vue3封裝一個(gè)帶動(dòng)畫(huà)的關(guān)閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題
本文主要介紹了如何解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁(yè)面,實(shí)現(xiàn)方式是將其他頁(yè)面作為組件傳入，在父頁(yè)面將該組件引入到彈框內(nèi)，實(shí)例代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11
在本篇文章里小編給大家分享了關(guān)于vue文件運(yùn)行的方法教學(xué)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07