新聞中心
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開發(fā)者使用vue。
在通信的時(shí)候容易出錯(cuò),或者信息根本傳不過(guò)來(lái)。那么這里就示例一下,怎么通過(guò)組件之間的通信完成點(diǎn)擊事件。
index.vue文件中:
點(diǎn)我
傳遞中介
引入組件,即是要彈出的組件
import addForm from './docsForm' export default { components: { addForm }, data() { return { show: false, formShow: false } }, watch: { show: { handler: function(newVal, oldVal) { this.show = newVal }, deep: true } }, methods: { onShow() { this.formShow = true } } }
該文件里面的方法就是這樣。
然后就是彈出組件docsForm.vue怎樣向上傳數(shù)據(jù)
export default { props: { show: false }, methods: { hide() { this.$emit('onHide') }, }
在組件slidePanel.vue中
{{title}}
這樣就可以實(shí)現(xiàn)不同組件之間的冊(cè)拉彈出。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站,關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
文章名稱:如何使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板-創(chuàng)新互聯(lián)
鏈接URL:http://fisionsoft.com.cn/article/jjjis.html