您好,登錄后才能下訂單哦!
寫(xiě)在前面
之前寫(xiě)過(guò)一篇關(guān)于vue實(shí)現(xiàn)dialog會(huì)話框組件的文章https://www.jb51.net/article/139218.htm
講到了如何實(shí)現(xiàn)一個(gè)vue對(duì)話框組件,其中涉及到了父組件和子組件的通信,這個(gè)不用多說(shuō),看我之前的文章就能明白,文章最后也說(shuō)到了,我們可以使用slot插槽來(lái)編寫(xiě)組件,slot用來(lái)分發(fā)內(nèi)容到子組件中,從而實(shí)現(xiàn)組件的高度復(fù)用,編寫(xiě)的組件更加靈活。
還是結(jié)合對(duì)話框的例子,使用slot來(lái)實(shí)現(xiàn)對(duì)話框組件
注冊(cè)一個(gè)名叫dialog-tip的全局組件
Vue.component('dialog-tip', { template: '#dialog-tip', props:['dialogShow','message'], data:function(){ return { content:'' } }, methods:{ } });
使用templete標(biāo)簽來(lái)定義這個(gè)組件
<template id="dialog-tip"> <div class="dialog_tip" v-if="dialogShow"> <div class="dialog_tip--mask"></div> <div class="dialog_tip--content"> <div class="dialog_tip--content__txt"> <slot name="msg">請(qǐng)輸入1-8000之間任意整數(shù)</slot> </div> <div class="dialog_tip--content__btns"> <slot> <button class="btn">確定</button> <button class="btn">重新輸入</button> <button class="btn">去注冊(cè)</button> </slot> </div> </div> </div> </template> <template id="dialog-tip"> <div class="dialog_tip" v-if="dialogShow"> <div class="dialog_tip--mask"></div> <div class="dialog_tip--content"> <div class="dialog_tip--content__txt"> <slot name="msg">請(qǐng)輸入1-8000之間任意整數(shù)</slot> </div> <div class="dialog_tip--content__btns"> <slot> <button class="btn">確定</button> <button class="btn">重新輸入</button> <button class="btn">去注冊(cè)</button> </slot> </div> </div> </div> </template>
組件內(nèi)容包括兩部分 ,一個(gè)是提示內(nèi)容,一個(gè)是button按鈕,我們將要修改替換的內(nèi)容使用slot包含起來(lái),
這樣父組件就可以分發(fā)內(nèi)容到子組件里面了。
<div class="dialog_tip--content__txt"> <slot name="msg">請(qǐng)輸入1-8000之間任意整數(shù)</slot> </div> <div class="dialog_tip--content__btns"> <slot> <button class="btn">確定</button> <button class="btn">重新輸入</button> <button class="btn">去注冊(cè)</button> </slot> </div>
除了默認(rèn)插槽,還可以定義具名插槽 ,如果組件中有好幾個(gè)部分內(nèi)容需要替換,我們可以為它定義一個(gè)name,例如:
<slot name="msg">請(qǐng)輸入1-8000之間任意整數(shù)</slot>
這樣在使用組件的時(shí)候,指定slot的name ,就會(huì)將這一部分內(nèi)容替換掉,而不會(huì)替換其他的插槽內(nèi)容
<p slot="msg">請(qǐng)輸入正確手機(jī)號(hào)</p>
使用定義好的dialog組件
<dialog-tip message="hello" :dialog-show="dialogShow.tip3"> <p slot="msg">請(qǐng)輸入正確手機(jī)號(hào)</p> <button class="btn" @click="closeDialogTip('tip3')">確定</button> </dialog-tip> <dialog-tip message="hello" :dialog-show="dialogShow.tip4"> <p slot="msg">抱歉,沒(méi)有此用戶,請(qǐng)核實(shí)后輸入</p> <button class="btn" @click="closeDialogTip('tip4')">重新輸入</button> <button class="btn" @click="reg">去注冊(cè)</button> </dialog-tip>
如果不指定slot的名稱,默認(rèn)dialog-tip標(biāo)簽里面的內(nèi)容會(huì)替換子組件中使用slot包含的內(nèi)容部分,例如以上
使用slot指定了它的名稱來(lái)替換子組件中的對(duì)應(yīng)的slot部分,而沒(méi)有使用slot指定名稱的內(nèi)容會(huì)默認(rèn)將子組件中
沒(méi)有定義具名插槽的部分內(nèi)容替換掉。
需要注意的是,如果dialog-tip標(biāo)簽里沒(méi)有定義需要分發(fā)的內(nèi)容,那么子組件中會(huì)顯示默認(rèn)的插槽內(nèi)容
關(guān)于更多的slot用法,請(qǐng)移步https://cn.vuejs.org/v2/guide/components-slots.html
最后
效果圖
總結(jié)
以上所述是小編給大家介紹的使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。