一轧葛、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論