組件的樣式沖突 scoped
默認情況：寫在組件中的樣式會 全局生效 → 因此很容易造成多個組件之間的樣式沖突問題。
1. 全局樣式: 默認組件中的樣式會作用到全局
2. 局部樣式: 可以給組件加上 scoped 屬性, 可以讓樣式只作用于當前組件
原理：當前組件內標簽都被添加 data-v-hash值 的屬性，css選擇器都被添加 [data-v-hash值] 的屬性選擇器
data
一個組件的 data 選項必須是一個函數。
保證每個組件實例，維護獨立的一份數據對象。
每次創建新的組件實例，都會新執行一次 data 函數，得到一個新對象。
組件通信
組件通信, 就是指 組件與組件 之間的數據傳遞。
父子關系
父組件通過 props 將數據傳遞給子組件，子組件利用 $emit 通知父組件修改更新
props
組件上注冊的一些自定義屬性，向子組件傳遞數據，可以傳遞任意數量的prop
校驗：為組件的 prop 指定驗證要求，不符合要求，控制臺就會有錯誤提示
prop & data單向數據流
非父子關系
event bus 事件總線
provide & inject
v-model 原理
v-model本質上是一個語法糖，提供數據的雙向綁定 。
例如應用在輸入框上，就是 value屬性 和 input事件 的合寫
表單類組件封裝
實現子組件和父組件數據的雙向綁定
父傳子：數據 應該是父組件 props 傳遞 過來的，拆解 v-model 綁定數據
子傳父：監聽輸入，子傳父傳值給父組件修改
v-model 簡化代碼
父組件 v-model 簡化代碼
子組件中：props 通過 value 接收，事件觸發 input
父組件中：v-model 給組件直接綁數據
.sync 修飾符
同樣可以實現子組件與父組件數據的雙向綁定
prop屬性名，可以自定義，非固定為 value
本質就是 :屬性名 和 @update:屬性名合寫
ref 和 $refs
利用 ref 和 $refs 可以用于獲取 dom 元素, 或組件實例
獲取 dom 元素
與document.querySelect不同的是ref只在當前組件中查找
獲取組件
$nextTick
Vue是異步更新的
$nextTick：等DOM更新后, 才會觸發執行此方法里的函數體
語法: this.$nextTick(函數體)
