Vue使用 emit on 進行元件通訊

2022-06-17 21:48:10 字數 550 閱讀 4892

第一步:建立乙個js檔案,引入vue,並返回乙個vue例項

import vue from

'vue

'export

default

new vue()

第二步:在main.js中引入這個js檔案,並將其掛在到vue原型上

import tool from

'@/assets/tool.js

'vue.prototype.event = tool

第三步:在父元件中向子元件或兄弟元件傳遞引數如下

this.event.$emit('

事件名','引數')

例:this.event.$emit('data-a','李雲龍')

第四步:需要在子元件中或兄弟元件 created 或者 mounted 中接收引數

created())}例:

created())

}

注:子元件向傳父和兄弟傳遞引數,同父傳子方法一樣,這點就不在舉例說明了

vue2 0 emit on元件通訊

在vue1.0中父子元件通訊使用 dispatch 和 broadcast,但是在vue2.0中 dispatch 和 broadcast 已經被棄用。因為基於元件樹結構的事件流方式實在是讓人難以理解,並且在元件結構擴充套件的過程中會變得越來越脆弱。這種事件方式確實不太好,我們也不希望在以後讓開發者...

Vue中使用EventBus進行元件通訊

vue中的eventbus類似與js原生的事件,即customevent事件,該事件主要是用於dom之間的互相通訊,而eventbus則不同,eventbus主要用於元件之間的通訊,該方法應用於兄弟元件之間通訊偏多,但是,該方法也可以應用於父子之間的相互通訊。這裡我以腳手架3.0為樣例進行講解接下來...

vue中使用pubsub進行兄弟元件之間傳值

安裝pubsub import pubsub from pubsub js 全新的 katex數學公式 語法 增加了支援甘特圖的mermaid語法1 功能 增加了 多螢幕編輯 markdown文章功能 增加了 焦點寫作模式 預覽模式 簡潔寫作模式 左右區域同步滾輪設定 等功能,功能按鈕位於編輯區域與...