一、元件通訊：父子元件通訊（父傳子）

1.基本使用

• 父元件檔案：data定義資料 + 動態繫結資料 :title="title"
• 子元件檔案：定義props接收資料（型別，是否必傳，預設值（資料/物件需要用函式），自定義驗證函式）

2.非Prop的Attribute

• 當我們傳遞給一個元件某個屬性，但是該屬性並沒有定義對應的props或者emits時，就稱之為 非Prop的 Attribute
• 常見的包括class、style、id屬性等；
• p當元件有單個根節點時，非Prop的Attribute將自動新增到根節點的Attribute中
• 如果我們不希望元件的根元素繼承attribute，可以在元件中設定 inheritAttrs: false
  ：
• 禁用attribute繼承的常見情況是需要將attribute應用於根元素之外的其他元素
• 我們可以通過 $attrs來訪問所有的 非props的attribute；

二、元件通訊：父子元件通訊（子傳父）

1.基本使用：

• 子元件檔案：監聽事件@click + 事件中發出emit + 定義emits屬性（vue3）
• 父元件檔案：子元件監聽發出的事件 + 定義事件方法

三、元件通訊：父子元件通訊（Provide/Inject）

1.基本使用：

• 父元件檔案：定義provide屬性（函式）
• 子元件檔案：定義inject屬性（陣列）

四、元件通訊：非連線的元件通訊（全域性事件匯流排mitt庫）

1.基本使用：

• 安裝：npm install mitt
• 封裝：一個工具eventbus.js（匯入 + 呼叫 + 匯出）
• 使用：
  • A元件檔案：匯入eventbus.js工具 + 發出事件emitter.emit(''why'',{可以攜帶引數})
  • B元件檔案：在生命週期函式中，監聽事件匯流排emitter.on

五、插槽Slot的基本使用（測試資料的作用域）：

1.基本使用：元件的內容全部替換到插槽中

2.資料的作用域：父元件的資料也可以顯示到子元件中

六、具名插槽Slot的基本使用：

1.基本使用：

• 子元件：<slot name="left"></slot>
• 父元件：<template v-slot:left> <button>左邊的按鈕</button> </template>，可以簡寫：<template #left> <button>左邊的按鈕</button> </template>

2.預設插槽名：

• 一個不帶 name 的slot，會帶有隱含的名字 default

3.動態插槽名：

• 目前我們使用的插槽名稱都是固定的，比如 v-slot:left等等，我們可以通過 v-slot:[dynamicSlotName]方式動態繫結一個名稱

七、渲染作用域（作用域插槽的背景）

1.渲染作用域：

• 父級模板裡的所有內容都是在父級作用域中編譯的
• 子模板裡的所有內容都是在子作用域中編譯的

八、作用域插槽（父元件沒法直接用子元件的資料，有渲染作用域）

1.作用：父元件可以訪問子元件的資料，並按照父元件期望的形式進行資料展示（子元件定義插槽）

• 父元件訪問子元件的資料：
• 父元件獲取元件slot屬性：v-slot="slotProps"，
• 子元件將資料繫結到動態屬性中：<slot :item="item"></slot>
• 按照父元件期望的形式進行資料展示：
• 子元件中定義slot插槽：<slot :item="item" :index="index"></slot>
• 父元件通過插槽的方式替換子元件的插槽內容

九、動態元件

1.概念：動態元件是使用 component 元件，通過一個特殊的attribute is 來實現

2.基本用法：<component is="元件名稱"></component>

3.is繫結的值是什麼內容？

• 可以是通過component函式註冊的元件
• 在一個元件物件的components物件中註冊的元件（區域性元件）

十、動態元件傳參

1.動態元件傳參跟普通元件一樣

區別：當前動態元件的 is 繫結哪個元件，引數就在哪個元件上

 十一、webpack程式碼（元件）分包

1.預設的打包過程

• 預設情況下，在構建整個元件樹的過程中，因為元件和元件之間是通過模組化直接依賴的，那麼webpack在打包時就會將組 件模組打包到一起（比如一個app.js檔案中）
• 這個時候隨著專案的不斷龐大，app.js檔案的內容過大，會造成首屏的渲染速度變慢

2.程式碼的分包

• 所以，對於一些不需要立即使用的元件，我們可以單獨對它們進行拆分，拆分成一些小的程式碼塊chunk.js
• 這些chunk.js會在需要時從伺服器載入下來，並且執行程式碼，顯示對應的內容

十二、非同步元件：Vue的程式碼分包（實際開發用的不多，用路由懶載入比較多）

1.背景

• 如果我們的專案過大了，對於某些元件我們希望通過非同步的方式來進行載入（目的是可以對其進行分包處理），那 麼Vue中給我們提供了一個函式：defineAsyncComponent。

2.defineAsyncComponent接受兩種型別的引數：

• 型別一：工廠函式，該工廠函式需要返回一個Promise物件；
• 型別二：接受一個物件型別，對非同步函式進行配置；

十三、非同步元件和Suspense：

1.注意：目前Suspense顯示的是一個實驗性的特性，API隨時可能會修改。

2.Suspense是一個內建的全域性元件，該元件有兩個插槽：

• default：如果default可以顯示，那麼顯示default的內容；
• fallback：如果default無法顯示，那麼會顯示fallback插槽的內容；

十四、元件的ref和$refs

1.使用場景：

• 某些情況下，我們在元件中想要直接獲取到元素物件或者子元件例項，這個時候，我們可以給元素或者元件繫結一個ref的attribute屬性
• 元件例項有一個$refs屬性，它一個物件Object，持有註冊過 ref attribute 的所有 DOM 元素和元件例項。

十五、元件的v-model

1.原生input標籤的v-model

• v-model預設幫助我們完成了兩件事：v-bind:value的資料繫結和@input的事件監聽

2.元件的v-model

• v-model預設幫助我們完成了兩件事：v-bind:modelValue的資料繫結和@update:model-value的事件監聽

3.程式碼案例

• <hy-input v-model="message"></hy-input>
• <hy-input :modelValue="message" @update:model-value="message = $event"></hy-input>

4.子元件input標籤中:vlaue和@input簡寫方式

5.元件中繫結兩個v-model