简单讲解：provide和inject叫依赖注入，是vue官方提供的API，它们可以实现多层组件传递数据，无论层级有多深，都可以通过这API实现。

假设这是太老爷组件： provide('名称', 传递的参数)向后代组件提供数据, 只要是后代都能接收

<template>

<div></div>

</template>

<script setup>

import { ref, provide } from 'vue'

const name = ref('天天鸭')

// 向后代组件提供数据, 只要是后代都能接收

provide('name', name.value)

</script>

最深层的孙组件： 无论层级多深，用 inject(接收什么参数) 进行接收即可

<template>

<div>{ { name }}</div>

</template>

<script setup>

import { inject } from 'vue'

// 接收顶层组件的通信

const name = inject('name')

</script>

八、路由传参

简单讲解： 路由跳转事上参数也是传参的一种，而且传参方式还不止一种呢，下面细说。

1、query传参

// 传递方

const query = { id: 9527, name: '天天鸭' }

router.push({ path: '/user', query })

// 接收方

import { useRoute} from 'vue-router'

const route = useRoute()

console.log(route.query)

2、params传参

注意：4.1.4 (2022-08-22) 删除了param这种方式

// 发送方

router.push({

name: 'test',

params: {

name: '天天鸭'

}

})

// 接收方

import { useRoute} from 'vue-router'

const route = useRoute()

console.log(route.params) // { name: '天天鸭' }

3、state传参

// 发送方

const state= { name: '天天鸭' }

router.push({ path: '/user', state })

// 接收方直接使用

console.log(history?.state?.name)

九、vuex传参

全局共享状态： 

import Vue from "vue"

import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({

state:{ // 用来定义一些变量

userName: "",

count: 1,

},

getters: { // 类似于计算属性

doneTodos (state) {

return state.count*2

}

},

mutations:{ // 是用来触发事件, 修改userName

saveName(state,userName){

state.userName = userName;

},

},

actions: { // 用于提交mutations，可以包含任意异步操作，, 在里面可以请求接口操作

increment (context) {

context.commit('saveName')

}

}

})

十、pinia

全局共享状态：

import {defineStore} from 'pinia'

const useUser = defineStore("user",{

state:() => ({ // 用来定义一些变量

mycount: 1,

}),

getters: { // 类似于计算属性

double: (state) => state.mycount * 2,

},

actions: { // 里面是一些方法，在里面可以请求接口操作

increment() {

this.mycount++

},

async registerUser(login, password) { // 异步操作

await api.post({ login, password })

}

}

})

export default useUser

十一、浏览器缓存

localStorage 和sessionStorage： 这算是用的不多，但也是必用的一种通信方式了，下面看看区别：

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

下面直接上使用的语法。

// 存储数据

localStorage.setItem('key', 'value');

sessionStorage.setItem('key', 'value');

// 获取数据

const valueFromLocalStorage = localStorage.getItem('key');

const valueFromSessionStorage = sessionStorage.getItem('key');

// 删除数据

localStorage.removeItem('key');

sessionStorage.removeItem('key');

// 清空所有数据

localStorage.clear();

sessionStorage.clear();