vue2捅位、vue3通信

一轧葛、vue2通信

1、eventBus

import Vue from 'vue';
Vue.prototype.$bus = new Vue()

// 發(fā)射消息
this.$bus.$emit('xxx', value) // 發(fā)射消息艇搀,通知接收方
 // 訂閱消息尿扯,即接收消息
this.$bus.$on('xxx', (data)=> {
  console.log(data)
})
// 取消訂閱,一般在beforeDestroy取消
this.$bus.$off() // 取消全部的訂閱
this.$bus.$off('xxx') // 取消單一事件訂閱
this.$bus.$off(['xxx1', 'xxx2', 'xxx3']) // 同時(shí)取消多個(gè)事件訂閱

建議事件監(jiān)聽放在組件掛載時(shí)去監(jiān)聽焰雕,如果放在組件生命周期 created 中監(jiān)聽可能會(huì)導(dǎo)致切換組件時(shí)不生效

2衷笋、props、emit
父組件傳遞消息給子組件

<Child  msg="Welcome to Your Vue.js App" @change="changeMsg" :test.sync="msg" />

子組件傳遞消息給父組件

this.$emit(‘change’,  'val') // 父組件用change事件接收

 this.$emit('update:test', data) // 用sync修飾矩屁,雙向數(shù)據(jù)綁定

3辟宗、provide爵赵、inject

// 父組件
 provide() {
    return {
      msg1: this.msg, // 只給子組件傳遞一次值,msg更新了泊脐,子組件接收到的值也不會(huì)更新
      msg2: () => this.msg // 子組件的值隨著父組件的值改變空幻,即為響應(yīng)式
    }
  }
// 子組件
 computed: {
    msg222() {
      return this.msg2(); // 由于父組件是用方法傳遞的,所以子組件使用前容客,需要先調(diào)用
    }
  },
  inject: ['msg1', 'msg2'],

4氛悬、vuex狀態(tài)管理,這個(gè)就不多說了

5耘柱、路由傳參

6、localStorage棍现、sessionStorage

7调煎、postMessage

8、父子互相訪問

// 父訪問子
$refs
$children 
// 子訪問父
$parent

二己肮、vue3

1士袄、eventBus:mittjs,可參考此篇
安裝: npm install mitt

// eventBus.js
import mitt from "mitt";
export default mitt()

// 引入
import bus from 'eventBus.js'

// 發(fā)射消息
bus.emit('eventFirst', firstName.value)

// 訂閱消息
bus.on('eventFirst', (data) => {
  console.log(data)
  firstName.value = data
})

// 取消訂閱
bus.off('eventFirst') // 取消單個(gè)訂閱
bus.all.clear() // 取消全部訂閱

2侍匙、props鹰贵、emit
父組件

// 三種傳遞方式
//  v-model:msg="msg" 
// v-model="test" 
// :test="test" 
<HelloWorld v-model:msg="msg" v-model="test"  :test="test" @changeMsg="changeMsg" />

子組件

// 接收值如下
const emit = defineEmits([ 'msg', 'modelValue', 'test''])
// 更新值
emit('update:msg', '33')
emit('update:modelValue', '454')
emit('changeMsg', '33')

3搀罢、provide、inject

provide(key, value)
// 和props一樣赤拒,可以寫類型、默認(rèn)值诱鞠、校驗(yàn)函數(shù)等
inject(key)

4挎挖、狀態(tài)管理,如果是ts的話航夺,推薦用pinia蕉朵,js的也可以用vuex

5/6/7都一樣的

8、父子互相訪問

// 父訪問子時(shí)阳掐,父組件
const childrenRef =  ref(null)
// 子組件
expose() //暴露父組件需要訪問的數(shù)據(jù) 

目前暫時(shí)沒看到子訪問父的

如有錯(cuò)誤或補(bǔ)充始衅,請(qǐng)?jiān)u論

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市缭保,隨后出現(xiàn)的幾起案子汛闸,更是在濱河造成了極大的恐慌,老刑警劉巖艺骂,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛉拙,死亡現(xiàn)場離奇詭異,居然都是意外死亡彻亲,警方通過查閱死者的電腦和手機(jī)孕锄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門吮廉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人畸肆,你說我怎么就攤上這事宦芦。” “怎么了轴脐?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵调卑,是天一觀的道長。 經(jīng)常有香客問我大咱,道長恬涧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任碴巾,我火速辦了婚禮溯捆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厦瓢。我一直安慰自己提揍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布煮仇。 她就那樣靜靜地躺著劳跃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪浙垫。 梳的紋絲不亂的頭發(fā)上刨仑,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音夹姥,去河邊找鬼贸人。 笑死,一個(gè)胖子當(dāng)著我的面吹牛佃声,可吹牛的內(nèi)容都是我干的艺智。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼圾亏,長吁一口氣:“原來是場噩夢啊……” “哼十拣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起志鹃,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤夭问,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后曹铃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缰趋,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秘血。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片味抖。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖灰粮,靈堂內(nèi)的尸體忽然破棺而出仔涩,到底是詐尸還是另有隱情,我是刑警寧澤粘舟,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布熔脂,位于F島的核電站,受9級(jí)特大地震影響柑肴,放射性物質(zhì)發(fā)生泄漏霞揉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一晰骑、第九天 我趴在偏房一處隱蔽的房頂上張望适秩。 院中可真熱鬧,春花似錦些侍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至淋样,卻和暖如春耗式,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背趁猴。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工刊咳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人儡司。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓娱挨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捕犬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子跷坝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容