1. 插槽
插槽是指, 將一個組件的代碼片段, 引入到另一個組件。
1.1?匿名插槽
通過簡單的案例來學習匿名插槽，案例說明，在父組件App.vue中導入了子組件Son1.vue，父組件引用子組件的位置添加了一個片段，比如h2標簽，然后在子組件選擇某個位置通過slot標簽引入父組件中定義的代碼片段。實操如下圖所示：
運行
可以看到正常情況下，應該是先執行“我是父組件的片段”，但是因為進行了插槽，并且<slot>標簽在子組件下, 所以子組件在上。如若<slot>標簽在上, 那么我是父組件的片段就在上方
1.2 具名插槽
之前寫的插槽都是沒有任何id或name等標識符, 這就會導致我們在一個子組件中, 只能引用一個父組件的片段, 不能使用多次, 或者說從多個父組件引用片段, 所以就需要有插槽名來進行區分
具名插槽需要配合template標簽并使用v-slot:插槽名來定義，具體案例實操如下圖所示：
運行
具名插槽的簡寫
我們使用具名插槽的時候格式是這樣的: <template? v-slot:插槽名> 片段</template>
v-slot:插槽名 我們可以寫成===>? :插槽名
?部分代碼
<Son><template :mySlot1><p>這是父組件的片段1</p></template><template v-slot:mySlot2><p>這是父組件的片段2</p></template></Son>1.3 作用域插槽
前兩個講的都是把父組件的片段引入到子組件,并沒有說明到傳值,?作用域插槽可以在slot標簽通過屬性的方式把值傳給父組件。
?
2. pinia
由于Vue3是組合式開發，有大量的組件，組件與組件之間雖然可以通過父子傳值等操作但是會造成大量的狀態散落在組件之間，維護起來非常不方面，Pinia可以很好的解決這些問題。
Pinia是一個輕量級的狀態管理庫。
所謂的狀態管理庫就是用于管理應用程序全局狀態的工具。那么什么又是全局狀態呢？
以登錄為例：
當用戶登錄成功時，登錄成功的這個狀態需要保持并維護，那么可以使用pinia來創建一個集中管理用戶登錄狀態的角色，并為其設置過期時間。
2.1 安裝和使用
在vscode的終端運行:? npm install pinia
在main.js文件中對pinia進行三步操作?導入,創建,注冊.?
通過上述操作，我們的項目就可以使用pinia了。
上面介紹的時候說了pinia是一個庫，那么具體幫我們管理組件之間數據和狀態的家伙是誰呢，一般管它叫store，接下來我們就來具體應用它。
在項目的src目錄下新建一個stores的目錄，然后再stores目錄下新建一個js文件當做我們存儲數據的倉庫，課程案例中取名用的是web.js,然后在web.js文件中定義store數據并導出，返回。實操如圖所示：
?
? ?
2.2? 創建store步驟
?1. 導入pinia的defineStore方法
?2. 創建defineStore的對象并暴露
?3. 在方法中傳遞參數('文件名',()=>{參數名})
import { reactive,ref } from "vue"
import { defineStore } from "pinia"export const useWebStore = defineStore('web',()=>{const web = reactive({title:"Pinia test",url:"bing.com"})const users = ref(100)const addUser = ()=>{users.value++}return {web,users,addUser}
})最后我們到組件上面去使用定義好的store倉庫中的數據以及函數，實操如下圖所示：
?2.3 運行結果
代碼:
<template><!-- <router-view></router-view> -->
webStore獲取到的值: {{ web.state }}
</template><script setup>
import {webStore} from './store/web.js'
const web = webStore()</script>
2.4 小結
先把一些需要用到的共享數據或函數給定義在一個js文件中，然后把該文件文件export出去。在使用的地方先導入，然后創建一個操作對象，通過操作對象進行操作即可。
3. 下一章預告
我們學到現在發現, 這是值雖然說可以獲取, 但是不能永久改變, 每次刷新后數值都會變回初始值.
那么下一章講的就是如何把數據進行持久化存儲, 至少說我的代碼運行的時候不會變回原來的樣子
?
)
