詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法

更新時(shí)間：2018年11月13日 08:54:14 作者：Laziji

在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識(shí)點(diǎn)，有需要的朋友們參考下。

組件傳參

通過給組件傳遞參數(shù), 可以讓組件變得更加可擴(kuò)展, 組件內(nèi)使用props接收參數(shù)

export default {
 props: ['options'],
 data(){
 return {}
 }
}

但是這個(gè)方法有局限性, 例如我寫了一個(gè)對(duì)話框組件, 對(duì)話框的內(nèi)容是自定義的
如果我只是顯示文字的話, 我可以簡單的將字符串傳進(jìn)去props: ['message']
但是如果需要在其中添加一個(gè)按鈕的話, 這種方法就顯得很笨重了, 所以我們用另一種辦法插槽

slot 插槽

slot的使用就像它的名字一樣, 在組件內(nèi)定義一塊空間, 取名為slotA

<div class="dialog">
 我是對(duì)話框
 <slot name="slotA"></slot>
</div>

在組件外, 我們可以往插槽里填入任何元素, dialog-a為組件的名稱

<dialog-a :options="hello">
 <template slot="slotA">
 <button>按鈕</button>
 // ... 可以是任何元素
 </template>
</dialog-a>

slot-scope 獲取插槽作用域

前面講的只是實(shí)現(xiàn)往組件內(nèi)加入元素, 但是并沒有和組件的數(shù)據(jù)有任何的交互
slot-scope的作用就是把組件內(nèi)的碼農(nóng)之家數(shù)據(jù)帶出來

<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()
}

您可能感興趣的文章:

Vue
組件

相關(guān)文章

Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vuex進(jìn)行Echarts數(shù)據(jù)頁面初始化后如何更新dom
這篇文章主要為大家詳細(xì)介紹了使用Vuex做Echarts數(shù)據(jù)時(shí),當(dāng)頁面初始化后如何更新dom,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue中如何獲取本地IP地址
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue如何解決空格和空行報(bào)錯(cuò)的問題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫了一個(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ù)量的表格渲染性能問題，使用canvas繪制表格，同時(shí)支持類似excel的批量選中，復(fù)制黏貼刪除，實(shí)時(shí)編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下
2017-11-11