1.Vue組件的嵌套關系
1.1認識組件的嵌套
前面我們是將所有的邏輯放到一個 App.vue 中；
- 在之前的案例中，我們只是創建了一個組件 App；
- 如果我們一個應用程序所有的邏輯都放在一個組件中，那么這個組件就會變成非常的臃腫和難以維護；
- 所以組件化的核心思想應該是對組件進行拆分，拆分成一個個小的組件；
- 再將這些組件組合嵌套在一起，最終形成我們的應用程序；
1.2組件關系之間的案例
2.父組件傳遞子組件
2.1組件嵌套和組件通信初認識
組件嵌套關系與通信必要性
一、組件嵌套關系
- App 組件是?
Header、Main、Footer?組件的父組件；Main?組件是?Banner、ProductList?組件的父組件。二、組件通信的場景（為何需要組件通信？）
Vue 項目開發中，組件間經常需要相互通信，常見場景包括：
- 父組件向子組件傳遞數據：
- 示例 1：App 組件若使用多個?
Header，需向不同?Header?傳遞不同數據，以展示差異化內容；- 示例 2：
Main?組件一次性請求到?Banner?數據和?ProductList?數據后，需將數據傳遞給?Banner?組件和?ProductList?組件。- 子組件向父組件傳遞事件 / 通知：
當子組件內部發生特定事件（如點擊操作、數據狀態變化）時，需要通知父組件執行對應操作（如修改父組件數據、觸發父組件方法）。三、總結
組件間通信是 Vue 項目開發的核心環節之一，后續將具體學習組件之間傳遞數據的方法。
2.1父組件傳遞子組件---數組用法
2.2父組件傳遞子組件----對象用法
3.非props的attribute
- 什么是非 Prop 的 Attribute 呢？
- 當我們傳遞給一個組件某個屬性，但是該屬性并沒有定義對應的 props 或者 emits 時，就稱之為?非 Prop 的 Attribute；
- 常見的包括 class、style、id 屬性等；
- Attribute 繼承
- 當組件有單個根節點時，非 Prop 的 Attribute 將自動添加到根節點的 Attribute 中：
00.禁用Attribute繼承和多根節點
如果我們不希望組件的根元素繼承 attribute，可以在組件中設置?
inheritAttrs: false：
- 禁用 attribute 繼承的常見情況是需要將 attribute 應用于根元素之外的其他元素；
- 我們可以通過?
$attrs?來訪問所有的非 props 的 attribute；代碼塊：
html
<div>我是NotPropAttribute組件<h2 :class="$attrs.class"></h2> </div>多個根節點的 attribute
- 多個根節點的 attribute 如果沒有顯示的綁定，那么會報警告，我們必須手動的指定要綁定到哪一個屬性上：
4.子組件傳遞父組件
什么情況下子組件需要傳遞內容到父組件呢？
- 當子組件有一些事件發生的時候，比如在組件中發生了點擊，父組件需要切換內容；
- 子組件有一些內容想要傳遞給父組件的時候；
我們如何完成上面的操作呢？
- 首先，我們需要在子組件中定義好在某些情況下觸發的事件名稱；
- 其次，在父組件中以
on-的方式傳入要監聽的事件名稱，并且綁定到對應的方法中；- 最后，在子組件中發生某個事件的時候，根據事件名稱觸發對應的事件；
