詳解Vue組件插槽的使用以及調用組件內的方法

來源：懂視網責編：小采時間：2020-11-27 22:04:03

詳解Vue組件插槽的使用以及調用組件內的方法

詳解Vue組件插槽的使用以及調用組件內的方法:組件傳參通過給組件傳遞參數, 可以讓組件變得更加可擴展, 組件內使用props接收參數 export default { props: ['options'], data(){ return {} } } 但是這個方法有局限性, 例如我寫了一個對話框組件, 對話框的內容是自定義的如果我只是顯示文字的話,

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解Vue組件插槽的使用以及調用組件內的方法:組件傳參通過給組件傳遞參數, 可以讓組件變得更加可擴展, 組件內使用props接收參數 export default { props: ['options'], data(){ return {} } } 但是這個方法有局限性, 例如我寫了一個對話框組件, 對話框的內容是自定義的如果我只是顯示文字的話,

組件傳參

通過給組件傳遞參數, 可以讓組件變得更加可擴展, 組件內使用props接收參數

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

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

slot 插槽

slot的使用就像它的名字一樣, 在組件內定義一塊空間, 取名為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 獲取插槽作用域

前面講的只是實現往組件內加入元素, 但是并沒有和組件的數據有任何的交互
slot-scope的作用就是把組件內的碼農之家數據帶出來

<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 調用組件內的方法

使用this.$refs找到組件后, 就可以調用其中methods中的方法

<dialog-a ref="dialogA"></dialog-a>

test(){
 this.$refs.dialogA.func()
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解Vue組件插槽的使用以及調用組件內的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法使用辦法

熱門焦點

詳解Vue組件插槽的使用以及調用組件內的方法

詳解Vue組件插槽的使用以及調用組件內的方法

詳解Vue組件插槽的使用以及調用組件內的方法

最新推薦

猜你喜歡

熱門推薦