「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮
前言
原本這篇打算寫Vue中的那個全局事件總線的原理，但是發(fā)現(xiàn)自己少寫了這個自定義事件，不講明白這個自定義事件的操作，不好寫全局事件原理，于是就有了這篇文章拉。
一、v-on指令
要講自定義事件，就得先說說v-on指令。因為v-on就是實現(xiàn)自定義事件的基礎。
v-on官網(wǎng)文檔
基本介紹
v-on指令可以縮寫為@，并且我們使用v-on指令時，其實它有一個默認參數(shù)event.
可以和它一起搭配的修飾符大致有以下幾種：
這些修飾符部分是可以串聯(lián)起來使用的。
作用：
-
綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。
-
用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
今天第二點才是我們滴重點哈。
示例：
<!-- 方法處理器 --> <button v-on:click="doThis"></button><!-- 動態(tài)事件 (2.6.0+) --> <button v-on:[event]="doThis"></button><!-- 內(nèi)聯(lián)語句 --> <button v-on:click="doThat('hello', $event)"></button><!-- 縮寫 --> <button @click="doThis"></button><!-- 動態(tài)事件縮寫 (2.6.0+) --> <button @[event]="doThis"></button><!-- 停止冒泡 --> <button @click.stop="doThis"></button><!-- 阻止默認行為 --> <button @click.prevent="doThis"></button><!-- 阻止默認行為，沒有表達式 --> <form @submit.prevent></form><!-- 串聯(lián)修飾符 --> <button @click.stop.prevent="doThis"></button><!-- 鍵修飾符，鍵別名 --> <input @keyup.enter="onEnter"><!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter"><!-- 點擊回調(diào)只會觸發(fā)一次 --> <button v-on:click.once="doThis"></button><!-- 對象語法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>在子組件上監(jiān)聽自定義事件 (當子組件觸發(fā)“my-event”時將調(diào)用事件處理器)：
<my-component @my-event="handleThis"></my-component><!-- 內(nèi)聯(lián)語句 --> <my-component @my-event="handleThis(123, $event)"></my-component><!-- 組件中的原生事件 --> <my-component @click.native="onClick"></my-component>看了這個v-on之后，不知道大家有沒有想起VueComponent實例上的$on，即vm.$on(event,callback)。
-
vm.$on(event,callback)用法：
監(jiān)聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
在此處，建議大家思考一下他們的區(qū)別，因為vm.$on其實就是實現(xiàn)全局事件總線的原理。
二、自定義事件
簡單圖示：
我們給在App組件中，通過v-on或者@給A組件綁定一個自定義事件，它的觸發(fā)時機是等到A組件在內(nèi)部調(diào)用this.$emit(’myevent‘),之后就會觸發(fā)App組件中的回調(diào)。
實際上我們給A組件通過v-on綁定一個自定義事件，其本質(zhì)就是我們在A組件實例對象VC上綁定了一個事件，事件名字叫我們自定義的名稱。
因為我們寫了一個<A></A>組件標簽，Vue底層也是要幫我們 new VueComponent()對象。
關于自定義事件名
自定義事件名它不同于組件和prop，事件名不存在任何自動化的大小寫轉換。只有事件名稱完全匹配時才能監(jiān)聽這個事件。
v-on事件監(jiān)聽器在 DOM 模板中會被自動轉換為全小寫，所以 v-on:myEvent 將會變成 v-on:my-event 從而導致 myEvent不可能被監(jiān)聽到。
vue 始終推薦你始終使用kebab-case的事件名。
三、入門案例
實現(xiàn)效果
App組件
<template><div id="app"><!-- props方法傳遞 --><Demo :showMsg="showMsg"></Demo><!--綁定自定義事件 send-message:是我們自定義事件名， 后面的sendMessage自定義事件被觸發(fā)執(zhí)行的回調(diào)函數(shù) --><Demo1 v-on:send-message="sendMessage"></Demo1></div> </template><script> import Demo from "./components/Demo.vue"; import Demo1 from "./components/Demo1.vue";export default {name: "App",components: {Demo,Demo1,},methods: {showMsg() {alert("收到來自demo的信息");},sendMessage(value) {alert("sendMessage自定義事件被觸發(fā)拉！！！收到來自demo2的信息:" + value);},}, }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>Demo組件
<template><div class="demo"><h1>Demo</h1><p>{{ msg }}</p><button type="button" @click="sendMsg">點擊發(fā)送消息給App組件</button></div> </template> <script> export default {props: {showMsg: Function,},data() {return {msg: "hello,大家好,我是寧在春",};},methods: {sendMsg() {this.showMsg();},}, }; </script> <style> .demo {width: 200px;height: 200px;background-color: #1488f5; } </style>demo1
<template><div class="demo1"><h1>Demo2</h1><span>{{ msg }}</span><button @click="sendAppMsg(msg)" type="button">點擊發(fā)送消息給App組件</button></div> </template> <script> export default {data() {return {msg: "大家好，我是來自Demo2的寧在春",};},methods: {sendAppMsg(message) {this.$emit("send-message", message);},}, }; </script> <style> .demo1 {width: 200px;height: 200px;background-color: pink; } </style>今天是先寫個頭，下一節(jié)再說全局事件總線的原理。
后語
大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。
紙上得來終覺淺，絕知此事要躬行。
大家好，我是博主寧在春：主頁
一名喜歡文藝卻踏上編程這條道路的小青年。
希望：我們，待別日相見時，都已有所成。
總結
以上是生活随笔為你收集整理的「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「后端小伙伴来学前端了」Vue中为什么直
- 下一篇： 「后端小伙伴来学前端了」Vue中全局事件