Vue組件之自定義事件的功能圖解
使用v-on綁定自定義事件
（一）基于webpack的項(xiàng)目初始化
在使用之前，我們先使用npm構(gòu)建一個(gè)vue應(yīng)用，使該項(xiàng)目能很好地和webpack模塊打包器配合使用，命令如下
進(jìn)入自定義空文件夾vuepro下，myapp項(xiàng)目初始化需利用webpack打包生成一個(gè)標(biāo)準(zhǔn)目錄的項(xiàng)目文件夾
vue init webpack myapp
安裝過(guò)程會(huì)出現(xiàn)以下幾個(gè)讓我們操作的地方，前幾個(gè)直接按回車，后面輸入n即可，如下圖
安裝完成后，myapp文件夾下會(huì)自動(dòng)生成一些文件和文件夾，表示我們項(xiàng)目初始化完成，而我們的的APP.vu是主組件，components組件是Vue的一種代碼復(fù)用的機(jī)制,components把js和HTML混合到一起，作為整個(gè)Vue應(yīng)用層的基礎(chǔ)
我們可以根據(jù)上圖終端提示的命令去運(yùn)行我們的項(xiàng)目
cd myapp
npm run dev
我們?cè)賹⑸蠄D中得到的網(wǎng)址賦值到瀏覽器打開，得到以下頁(yè)面表示我們基于webpack的項(xiàng)目構(gòu)建成功
打開主組件，如果親們出現(xiàn)了下圖和我一樣的提醒，是因?yàn)槲覀兊膉avascript不支持ES6語(yǔ)法，我們只需進(jìn)入設(shè)置里面改一下語(yǔ)言類型就可以了。
到這里我們可以去介紹組件自定義事件的使用了
（二）v-on && $emit 使用 $on(eventName) 監(jiān)聽事件 使用 $emit(eventName) 觸發(fā)事件
我們?cè)趍yapp/src/components下新建一個(gè)組件Emit.vue，同時(shí)我們得在主組件APP.vue中引入該組件，以及注冊(cè)該組件
然后我們?cè)贓mit.vue文件中去些一個(gè)自定義事件的例子
當(dāng)我們點(diǎn)擊按鈕就能獲取到組件內(nèi)部的事件盒參數(shù)
總結(jié)
以上所述是小編給大家介紹的Vue組件之自定義事件的功能圖解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue實(shí)現(xiàn)將數(shù)據(jù)庫(kù)中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))
今天小編就為大家分享一篇Vue實(shí)現(xiàn)將數(shù)據(jù)庫(kù)中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡(jiǎn)單來(lái)講實(shí)現(xiàn)思路是通過(guò)template標(biāo)簽可理解為一個(gè)內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07
vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解
文件上傳是我們?cè)陂_發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來(lái)實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)
這篇文章主要介紹了Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在 Vue 3 里使用路由跳轉(zhuǎn)到用戶頁(yè)并傳遞路徑參數(shù)時(shí),存在一些限制和需要注意的方面,下面給大家分享vue3中傳遞路徑參數(shù)有什么限制,感興趣的朋友一起看看吧2025-03-03
vue實(shí)現(xiàn)el-select 觸底分頁(yè)+遠(yuǎn)程搜索的示例
有的時(shí)候數(shù)據(jù)量比較大,比如幾千甚至上萬(wàn)條的時(shí)候,如果直接賦值,整個(gè)頁(yè)面的 dom 會(huì)被撐爆,本文主要介紹了vue實(shí)現(xiàn)el-select 觸底分頁(yè)+遠(yuǎn)程搜索的示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04