傍晚的月亮

前言

原本這篇打算寫Vue中的那個全局事件總線的原理，但是發(fā)現(xiàn)自己少寫了這個自定義事件，不講明白這個自定義事件的操作，不好寫全局事件原理，于是就有了這篇文章拉。

一、v-on指令

要講自定義事件，就得先說說v-on指令。因?yàn)関-on就是實(shí)現(xiàn)自定義事件的基礎(chǔ)。

v-on官網(wǎng)文檔

基本介紹

v-on指令可以縮寫為@，并且我們使用v-on指令時，其實(shí)它有一個默認(rèn)參數(shù)event.

可以和它一起搭配的修飾符大致有以下幾種：

.stop - 調(diào)用 event.stopPropagation()。 停止冒泡

.prevent - 調(diào)用 event.preventDefault()。 阻止默認(rèn)行為

.capture - 添加事件偵聽器時使用 capture 模式。

.self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。

.{keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。 鍵修飾符，鍵別名

.native - 監(jiān)聽組件根元素的原生事件。

.once - 只觸發(fā)一次回調(diào)。

.left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時觸發(fā)。

.right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)。

.middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)。

.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

這些修飾符部分是可以串聯(lián)起來使用的。

作用：

• 綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。

• 用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

  今天第二點(diǎn)才是我們滴重點(diǎn)哈。

示例：

<!-- 方法處理器 --> <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><!-- 阻止默認(rèn)行為 --> <button @click.prevent="doThis"></button><!-- 阻止默認(rèn)行為，沒有表達(dá)式 --> <form @submit.prevent></form><!-- 串聯(lián)修飾符 --> <button @click.stop.prevent="doThis"></button><!-- 鍵修飾符，鍵別名 --> <input @keyup.enter="onEnter"><!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter"><!-- 點(diǎn)擊回調(diào)只會觸發(fā)一次 --> <button v-on:click.once="doThis"></button><!-- 對象語法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子組件上監(jiān)聽自定義事件 (當(dāng)子組件觸發(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實(shí)例上的$on，即vm.$on(event,callback)。

• vm.$on(event,callback)用法：

  監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由 vm.$emit 觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

在此處，建議大家思考一下他們的區(qū)別，因?yàn)関m.$on其實(shí)就是實(shí)現(xiàn)全局事件總線的原理。

二、自定義事件

簡單圖示：

我們給在App組件中，通過v-on或者@給A組件綁定一個自定義事件，它的觸發(fā)時機(jī)是等到A組件在內(nèi)部調(diào)用this.$emit(’myevent‘),之后就會觸發(fā)App組件中的回調(diào)。

實(shí)際上我們給A組件通過v-on綁定一個自定義事件，其本質(zhì)就是我們在A組件實(shí)例對象VC上綁定了一個事件，事件名字叫我們自定義的名稱。

因?yàn)槲覀儗懥艘粋€<A></A>組件標(biāo)簽，Vue底層也是要幫我們 new VueComponent()對象。

關(guān)于自定義事件名

自定義事件名它不同于組件和prop，事件名不存在任何自動化的大小寫轉(zhuǎn)換。只有事件名稱完全匹配時才能監(jiān)聽這個事件。

v-on事件監(jiān)聽器在 DOM 模板中會被自動轉(zhuǎn)換為全小寫，所以 v-on:myEvent 將會變成 v-on:my-event 從而導(dǎo)致 myEvent不可能被監(jiān)聽到。

vue 始終推薦你始終使用kebab-case的事件名。

三、入門案例

實(shí)現(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">點(diǎn)擊發(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">點(diǎn)擊發(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é)再說全局事件總線的原理。

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結(jié)

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。