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
安裝過程會出現(xiàn)以下幾個(gè)讓我們操作的地方，前幾個(gè)直接按回車，后面輸入n即可，如下圖
安裝完成后，myapp文件夾下會自動生成一些文件和文件夾，表示我們項(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
我們再將上圖中得到的網(wǎng)址賦值到瀏覽器打開，得到以下頁面表示我們基于webpack的項(xiàng)目構(gòu)建成功
打開主組件，如果親們出現(xiàn)了下圖和我一樣的提醒，是因?yàn)槲覀兊膉avascript不支持ES6語法，我們只需進(jìn)入設(shè)置里面改一下語言類型就可以了。
到這里我們可以去介紹組件自定義事件的使用了
（二）v-on && $emit 使用 $on(eventName) 監(jiān)聽事件 使用 $emit(eventName) 觸發(fā)事件
我們在myapp/src/components下新建一個(gè)組件Emit.vue，同時(shí)我們得在主組件APP.vue中引入該組件，以及注冊該組件
然后我們在Emit.vue文件中去些一個(gè)自定義事件的例子
當(dāng)我們點(diǎn)擊按鈕就能獲取到組件內(nèi)部的事件盒參數(shù)
總結(jié)
以上所述是小編給大家介紹的Vue組件之自定義事件的功能圖解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue封裝一個(gè)簡單的div框選時(shí)間的組件的方法
這篇文章主要介紹了vue封裝一個(gè)簡單的div框選時(shí)間的組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vuex 進(jìn)階之模塊化組織詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法
這篇文章主要介紹了Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue項(xiàng)目依賴升級報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目依賴升級報(bào)錯(cuò)處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)詳解(select空白bug解決)
最近開始學(xué)習(xí)vue,在學(xué)習(xí)的過程中遇到的問題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue.js+HighCharts實(shí)現(xiàn)動態(tài)請求展示時(shí)序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動態(tài)請求展示時(shí)序數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue如何修改el-form-item中的label樣式修改問題
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3.0中ref與reactive的區(qū)別及使用場景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue.js添加組件操作,結(jié)合實(shí)例形式分析了vue.js組件的注冊、調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2018-06-06