07丨Vue元件的核心概念 2 事件

2022-01-20 09:48:24 字數 1307 閱讀 9876

子元件通過this.$emit(『事件源』,接收的引數)

通過乙個事件的demo來演示一下。通過emit傳遞給父元件

有乙個input繫結了乙個change事件,通過handlechange去接收change的**。

下面還有兩個按鈕,乙個是重置成功,乙個是重置失敗。在外層的div上同樣的繫結了乙個click,也就是說在div裡面有3個click事件。

重置成功是把input和上面的name值重置為空,

點選重置失敗的時候,值並沒有被清空。

兩個事件的區別就是重置失敗按鈕的事件,加了乙個.stop

我們點選了重置失敗,上層的div的click=handledivclick是接收不到。重置失敗的點選的行為的

通常情況下,你不用.stop也可以到達到乙個冒泡的效果.就是去手動的阻止冒泡。

這樣點選重置成功,依然是沒有成功

">重置成功   

"handleclick

">重置失敗

我們知道觸發事件是通過$.emit觸發的,

那麼this.$emit最後的返回值是什麼?如果在我們上層元件,它return了乙個值,那麼我們的this.$emit能不能接收到呢?

掌握vue核心概念之元件

推薦駝峰命名 或者 使用 還是看個人看法習慣 const globalcomponent template 這是乙個全域性元件 const localcomponent template 這是乙個區域性元件 vue.component globalcomponent globalcomponent ...

Vue核心知識 Vue的元件之render函式

元件中的 template 會被編譯成 render function。下例中,直接用 render function 代替 template,結果相同。import vue from vue const component this.slots.default data value compone...

190323 Vue 的核心概念有哪些

最近幾年,國內最流行的前端框架,真的是非 vue 莫屬了,而對於自己來說,有點 out。對於實踐這方面來說,僅僅是通過改造公司內部管理系統,然後練習了 vue 的 這兩部分而已,其中的核心概念還沒有深入研究過。所以這次想好好梳理一下。vue.js 是 2014 年 2 月開源的乙個前端開發庫,通過簡...