【scoped作用及原理】

【作用】

默認寫在組件中style的樣式會全局生效, 因此很容易造成多個組件之間的樣式沖突問題

故而可以給組件加上scoped 屬性， 令樣式只作用于當前組件的標簽

作用：防止不同vue組件樣式污染

【原理】

給組件加上scoped 屬性后， 組件發生如下變化：

1. 組件內所有標簽都被添加了一個名為data-v-xxxx(八位隨機字符串)?的自定義屬性(因此， 每個組件生成的這個屬性名都各不相同)

2. scope會用這個屬性構成屬性選擇器， 配合程序員編寫的選擇器， 形成了一個交集選擇器

最終:? 必須是當前組件的元素, 才會有這個自定義屬性, 從而保證了樣式只能作用到當前組件

【組件通信】

一個組件把數據傳遞給另一個組件

組件化開發中，通過代碼拆分和組合化作一系列組件的方式進行開發，這種情況下，組件之間難免需要數據傳遞，這就需要組件通信

因此， 需要辨別兩個組件之間的關系， 從而選擇不同的組件方案

【父子組件】

父傳子： props自定義屬性

子傳父： emit自定義事件

【非父子組件】

1.祖先與后代： provide（） + inject（）

2.兄弟組件： eventBus()

【如何辨別關系】

?父子關系：?誰使用， 誰就是父組件， 誰被使用， 誰就是子組件

【父傳子原理】

父組件通過props， 將數據傳遞給子組件

【子傳父】

props是只讀的，子組件不能修改父組件傳遞的數據，

因此可以通過emit方式， 通知父組件，父組件收到通知后自行修改?

圖中子傳父流程：

1.父組件通過點擊砍一刀按鈕， 執行onCut函數, onCut函數調用emit方法， emit觸發子組件的ccc自定義事件

2.ccc事件觸發subPrice函數， 并獲得emit方法傳過去的值用于subPrice的參數， 從而成功執行砍一刀功能

【props校驗】

為組件的 prop 指定驗證要求，不符合要求，控制臺就會有錯誤提示，幫助開發者快速發現錯誤

語法：

也可以寫成完整寫法， 達成一些更復雜的需求

【組件的 ref/reactive 與props 的區別】

共同點

都可以給組件提供數據

區別

?1.ref/reactive 的數據是組件自己的 → 隨便改， 可讀可寫

2.prop 的數據是外部的， 是父組件提供的?→ 不能直接改，遵循單向數據流原則， 子組件若想改， 需要用到子傳父的通信規則

單向數據流： 子組件的props數據來源于父組件， 當父組件數據改了， 會影響子組件的props，這個方向只能是父 --> 子?