vue3
1. 父传子
父组件通过冒号：绑定变量，然后子组件用const props = defineProps({})进行接收参数
2. 子传父
子组件用 const emits = defineEmits(['触发的方法']) 注册某个在父组件的事件，然后通过emits('触发的事件', 参数) 触发父组件事件并且带上参数
3. 兄弟组件传参（mitt）
以前vue2是用EventBus事件总线跨组件实现兄弟组件通信的。但vue3中没有，所以vue3目前主流使用mitt.js插件来进行替代实现vu3兄弟通信
4. useAttrs（$attrs）
$attrs主要作用是接收没在props里面定义，但父组件又传了过来的属性
//父组件
<child:name="天天鸭"data="PC9527"/>
//子组件
<template>
<div>
{{ props.name }} // '天天鸭'
</div>
</template>
<script setup>
import { defineProps, useAttrs } from 'vue'
const props = defineProps({
name: {
type: String
}
})
const myattrs = useAttrs()
console.log(myattrs) // { "data": "PC9527" }
</script>
5. refs
父组件通过在子组件上定义 ref='ref名称'，然后const ref名称 = ref(null)，就能通过ref名称操控子组件的属性和方法（子组件用defineExpose对外暴露才能被操控）
- v-model
父组件代码： 直接使用v-model传参 v-model:title="title"
子组件代码： 通过 defineEmits获取到然后用emit("update:修改的属性", 修改的内容)进行修改父组件的内容，注意：update:是固定写法。
const emit = defineEmits(["title"])
// 子组件触发使用
constmyClick = () => {
emit("update:title", "改个新名字")
}
7. provide/inject
provide和inject叫依赖注入，是vue官方提供的API，它们可以实现多层组件传递数据，无论层级有多深，都可以通过这API实现
//前辈组件：provide('名称', 传递的参数)向后代组件提供数据, 只要是后代都能接收
const title = ref('title1')
// 向后代组件提供数据, 只要是后代都能接收
provide('name', title.value)
//后代组件：无论层级多深，用 inject(接收什么参数) 进行接收即可
import { inject } from 'vue'
// 接收顶层组件的通信
const name = inject('name')
8. 路由传参
query参数
// 传递方
const query = { id: 9527, name: '天天鸭' }
router.push({ path: '/user', query })
// 接收方
import { useRoute} from 'vue-router'
const route = useRoute()
console.log(route.query)
state传参：history
// 发送方
const state= { name: '天天鸭' }
router.push({ path: '/user', state })
// 接收方直接使用
console.log(history?.state?.name)
9. vuex传参
10. pinia传参
11. 浏览器缓存
sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
- window
- app.config.globalProperties
app.config.globalProperties 是Vue官方的一个 api，这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，Vue.prototype 法在 Vue3 已经不存在了。与任何全局的东西一样，应该谨慎使用。
//在main.js文件挂载一个全局的 msg 属性
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.msg = 'hello'
------------------------------------
// 在其它页面使用getCurrentInstance()获取
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() // 使用proxy，类似于vue2的this
console.log(proxy.msg); // hello
vue2
-
父组件向子组件传值，用props 属性，
-
子组件主要通过事件传递数据给父组件子向父传数据可以用$emit触发传，但是这种方法无法实现兄弟组件直接传数据
-
利用provide/inject,可以实现由祖先元素向子孙组件传递数据，方法，不需要知道祖先组件的其他作用组件，直接传递所需要的
-
利用vuex实现数据共享，把数据统一存入state, 只允许通过Actions触发Mutations修改，这种也是vue推荐的一种数据传递的方法
-
通过params 或者query,这个主要通过路由地址参数来传递值
-
借助中央事件总线（eventBus），主要运用于兄弟组件通信
参考文献
