本想簡單寫寫，沒想到說清楚已經變成了一篇很長的帖子翰守，歡迎當筆記搜藏起來孵奶。
props / emits 父子組件通信
props一般負責向子組件傳遞數(shù)據(jù)
下面是一個簡單的例子，父組件向子組件傳遞了一個title潦俺，子組件負責顯示title。
// child-component.vue
<template>
<h2>{{ title }}</h2>
</template>
<script>
export default {
name: "child-component",
props: ['title'] //可以注冊多個prop
}
</script>
// 父組件中，使用子組件
<ChildComponent :title="'這是傳遞的Title'"></ChildComponent>
emits主要用于監(jiān)聽子組件事件
開發(fā)過程中子組件可能需要與父級組件進行溝通事示，這時我們就需要用到emits早像。下面是一個簡單的例子，點擊子組件按鈕時肖爵，改變了父組件顯示的信息卢鹦。
// child-component.vue
<button @click="$emit('textChange', '子組件被點擊了')">點我</button>
// 父組件中，使用子組件
<template>
<div>
<div>{{ msg }}</div>
<ChildComponent @textChange="msg = $event"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "./child-component"
export default {
components: {
ChildComponent
},
data() {
return {
msg: 'test msg!'
}
}
}
</script>
prop 類型劝堪、驗證以及默認值
這三塊內容在官網篇幅還挺長的冀自，感覺上重點卻不多，我們上面注冊props的時候使用的數(shù)組秒啦，如：["title"]熬粗，其實實際開發(fā)過程中，為了傳值的清晰余境，我們用的都是對象驻呐，此外我們會指定其類型，驗證規(guī)則芳来，以及給出默認值含末，三者都是可選的，看下面的例子：
export default {
props: {
// 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
propA: Number,
// 多個可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認值的對象
propE: {
type: Object,
// 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取
default() {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
propF: {
validator(value) {
// 這個值必須匹配下列字符串中的一個
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默認值的函數(shù)
propG: {
type: Function,
// 與對象或數(shù)組默認值不同即舌，這不是一個工廠函數(shù) —— 這是一個用作默認值的函數(shù)
default() {
return 'Default function'
}
}
}
}
注意：
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中佣盒，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)顽聂，從而導致你的應用的數(shù)據(jù)流向難以理解肥惭。
另外，每次父級組件發(fā)生變更時芜飘，子組件中所有的 prop 都將會刷新為最新的值务豺。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了嗦明，Vue 會在瀏覽器的控制臺中發(fā)出警告笼沥。
但是，如果prop傳遞的是一個對象或者數(shù)組娶牌，我們是可以改變其內部的數(shù)據(jù)的奔浅，同時這個改變會變更對象或數(shù)組本身，從而影響到其所在父組件的狀態(tài)诗良。
vue3的新選項emits
vue 3 提供了一個 emits 選項汹桦，和現(xiàn)有的 props 選項類似。這個選項可以用來定義一個組件可以向其父組件觸發(fā)的事件鉴裹。emits 選項中列出的事件不會從組件的根元素繼承舞骆，也將從$attrs property中移除钥弯。
emits 可以是數(shù)組或對象，從組件觸發(fā)自定義事件督禽，emits 可以是簡單的數(shù)組脆霎，也可以是對象，后者允許配置事件驗證（因為返回false也依舊會繼續(xù)調用事件狈惫，所以作者本人沒理解驗證這塊睛蛛，有知道的小伙伴歡迎留言）。使用如下：
emits: {
// 沒有驗證函數(shù)
click: null,
// 帶有驗證函數(shù)
submit: payload => {
if (payload.email && payload.password) {
return true
} else {
return false // 返回false事件依舊會繼續(xù)被調用
}
}
}
因為不聲明emits也可以使$emit來調用傳遞的事件胧谈，所以看似用處不大忆肾，但聲明首先可以使代碼清晰，可以一眼看到向其父組件透傳的事件菱肖。同時需要向其父組件透傳原生事件（如：@ckick）的組件來說客冈，不聲明會導致事件被觸發(fā)兩次，而聲明可以避免這類問題蔑滓。
provide / inject 多層嵌套組件通信
使用場景：
1郊酒、多層嵌套組件傳值
2、父子組件相互尋找比較麻煩键袱，如slot
簡單示例：
// 父組件 提供對象
provide: {
user: 'John Doe'
}
// 子組件燎窘，接收對象
inject: ['user'],
created() {
console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
}
訪問組件實例 property（用this），我們需要將 provide 轉換為返回對象的函數(shù)
// 父組件
data() {
return {
userName: 'test name',
}
},
provide() {
return {
user: this.userName
}
}
響應性注意這里傳遞的是值蹄咖，并不是響應式的褐健，官網建議分配一個組合式 API computed property：
// 來自官網的建議
todoLength: Vue.computed(() => this.todos.length)
個人建議直接傳遞一個對象過去，利用指針傳遞來實現(xiàn)響應式澜汤。（簡單粗暴）如果非要了解可以關注后續(xù)再寫文章中關于 reactive provide/inject 的信息
$attrs / $parent / $refs 能抓到貓就是好老鼠系列
$attrs 包含了父作用域中不作為組件 props 或 emits 的 attribute 綁定和事件蚜迅。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定俊抵，并且可以通過 v-bind="$attrs" 傳入內部組件——這在創(chuàng)建高階的組件時會非常有用谁不。
示例：
// 父組件中
<ChildComponent title="123" titleProp="456"></ChildComponent>
// 子組件中
props: ['titleProp'],
created() {
console.log(this.$attrs.title); // 123
console.log(this.$attrs.titleProp); // undefined
console.log(this.title); // undefined
console.log(this.titleProp); // 123
}
$parent 這是父實例，如果當前實例有的話徽诲。簡單粗暴拿著實例各種用刹帕。
$refs 一個對象，持有注冊過ref的所有 DOM 元素和組件實例谎替。父組件使用其可以輕易的獲取子組件偷溺，并各種使用。
eventBus 事件總線vue3不支持了
在絕大多數(shù)情況下钱贯，不鼓勵使用全局的事件總線在組件之間進行通信挫掏。雖然在短期內往往是最簡單的解決方案，但從長期來看秩命，它維護起來總是令人頭疼尉共。
如果非得要用褒傅，可以使用一些外部第三方庫，例如 mitt 或 tiny-emitter
// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),
}
vuex 和 自定義共享對象
vuex 輕松獲取響應式的全局數(shù)據(jù)袄友。
業(yè)務獨立的組件通信更推薦的做法是自定義一個js對象樊卓，用js對象來保存共享數(shù)據(jù)和函數(shù)。export是一個對象的話杠河，import之后訪問的是同一個對象，其可以方便的提供數(shù)據(jù)共享和函數(shù)調用浇辜。此外券敌，如果想要不同的對象可以export一個工廠函數(shù)。
總結
- props / emits 應該是父子組件之間溝通的首選柳洋。兄弟節(jié)點可以通過它們的父節(jié)點通信待诅。
- provide / inject 允許一個組件與它的插槽內容進行通信。這對于總是一起使用的緊密耦合的組件非常有用熊镣。
- provide / inject 也能夠用于組件之間的遠距離通信卑雁。它可以幫助避免“prop 逐級透傳”，即 prop 需要通過許多層級的組件傳遞下去绪囱，但這些組件本身可能并不需要那些 prop测蹲。
- prop 逐級透傳也可以通過重構以使用插槽來避免。如果一個中間組件不需要某些 prop鬼吵，那么表明它可能存在關注點分離的問題扣甲。在該類組件中使用 slot 可以允許父節(jié)點直接為它創(chuàng)建內容，因此 prop 可以被直接傳遞而不需要中間組件的參與齿椅。
- 全局狀態(tài)管理琉挖，比如 Vuex
