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