vue元件之間的相互呼叫(父子關係與非父子關係)

2021-10-05 12:48:55 字數 1097 閱讀 8343

父子元件的通訊請檢視這篇博文

此文主要介紹兄弟元件間的通訊

所有元件通訊方式請檢視這篇博文

第一種:eventbus

建立bus.js(bus與main.js平級)

export default(vue) => ,

$off (...param) ,

$once (...param) ,

$emit (...param)

}}

在main.js引入並呼叫

import bus from './bus'

bus(vue)

在元件1中傳送事件:

tocenter ()
在元件2中接收:

created () )

}

第二種方法:狀態集中管理vuex

在store.js中,儲存需要儲存的資料及方法

state: 

},// 相當於計算屬性

getters: ,

// 相當於methods

mutations: = data // 解構裡面的id與num值

vue.set(state.storecart, id, num) // 動態修改state中的值

localstorage.setitem('cart', json.stringify(state.storecart)) // 存入本地

}}vuex中state中的資料及getter中的方法可以直接在元件中通過屬性呼叫

this.store.state.storecart

this.store.getters.donetodosstore

而mutation 這個選項更像是事件註冊:「當觸發乙個型別為 increment 的 mutation 時,呼叫此函式。」要喚醒乙個 mutation handler,你需要以相應的 type 呼叫 store.commit 方法:傳入額外的引數,即 mutation 的 載荷(payload):

this.store.commit('modify', )

React Hook 父子元件相互呼叫方法

1.子元件呼叫父元件函式方法 父元件let father return 子元件let children param 子元件呼叫父元件函式,可以向父元件傳參,重新整理父元件資訊 2.父元件條用子元件函式方法 父元件 需要引入useref import from react let father ret...

iframe的父子視窗之間的物件相互呼叫基本用法

使用ifr的時候,可能會涉及到父子視窗之間傳值和方法的相互呼叫,之前程式設計客棧一直有些迷糊,也沒有著意去弄清楚,這兩天要幹活,沒法子了只好把這都弄明白了。其實非常簡單,就那麼幾個用法,幾句 而已。子視窗中呼叫父視窗的js方法 複製 如下 parent.changebtntitle tzgg 乙個父...

vue中子元件與父元件資料之間的相互呼叫

最近練手了乙個專案,是這樣的乙個頁面我拆分成了父元件 test.vue 和子元件 use select.vue 首先在父元件的js內用import引入子元件 字尾名省略了 import userselectdiv from user select 然後再data下面同級的部分寫乙個component...