Vue插槽及Pinia | 青训营
一、Vue插槽
- 是什么：
- 在vue组件里定义可重用模板的实现方式
- 在组件间传递内容的机制
- 特点：
- 分类
- 默认插槽
- 子组件的slot值为default
- 特点
- 插槽优先渲染父组件传递的内容，如果没有接收到，就渲染插槽内部本身具有的内容
- 注意：不传递给具名插槽的所有内容都是属于传递给默认插槽的内容
- 注意：
- 一个插槽如果没有指定name属性，它也会被隐式命名为default
- 具名插槽
- 特点
- 使用方法
- 子组件指定slot标签上的name属性的属性值
- 父组件
- 在template标签上指定v-slot/#=name的属性值
- 或者使用动态插槽名
- 作用域插槽
- 作用：使得父组件能用得了子组件里的数据
- 使用方法
- 对于默认插槽
- 在父组件里的子组件标签上，添加v-slot指令
- 子组件：传参
- 对于具名插槽
- 在父组件里的子组件上，添加一个接收props值的对象
- template上添加v-slot:name="对象名"/#name="对象名"
- 在子组件上添加属性
- 除了name属性外别的加于slot上的属性会一起作为一个对象传递给父组件
- 使用注意事项
- 如果具名和默认插槽同时使用
- 父组件里使用该子组件的位置外必须外套一个template标签
- 清晰指出默认插槽的内容在具名插槽中不能使用，防止编译出错
二、Pinia
- 是什么：Vue的状态管理库
- 本质为一个Store，一个保存状态和业务逻辑的实体
- 包含什么：可在整个vue应用中访问的数据
- 使用方法：
- 安装：创建项目时选择或者npm install pinia/yarn add pinia
- 创建文件index.js/index.ts
- 作用
- 创建位置
- 创建内容：根Store
- import { createPinia } from "pinia"
- const store = creaPinia()
- export default store
- 在main.js/main.ts里引入Store
- import store from './stores'
- app.use(store)
- 定义Store（实际是一个函数）
- 定义位置
- src/stores/modules/user.js或者user.ts
- 代码
- 使用Store
- 引入
- import useUserStore from '@/stores/modules/user'
- @代表src目录
const userStore = useUserStore()
- 状态持久化：
- 为什么要用：
- 如何实现：
- 安装插件：
- npm i pinia-plugin-peisistedstate
- 引入插件：
- src/stores/index：import piniaPluinPersistedstate及store.use(piniaPluginPeisistedstate)
- 配置持久化
- 持久化数据的存储位置：
- 浏览器的localStorage或sessionStorage里
- 全部数据持久化：
- src/stores/modules/user：defineStore('user',()=>{......,{peisist:true}}
- 部分数据持久化：
- persist: piniaPersistConfig('user', 要持久化的属性)
