vue3_组件间通信方式
目录
一、父子通信
1.父传子（ defineProps）
2.父传子（useAttrs）
3.子传父（ref，defineExpose ）
4.子传父（defineEmits）
5.子传父（v-model）
二、祖孙通信
1.祖传孙（provide/inject）
三、任意关系通信
1.mitt
2.vuex / pinia
3.浏览器缓存
四、路由跳转通信
1.query传参
2.params传参
3.state传参
一、父子通信
1.父传子（ defineProps）
在子元素里面使用defineProps接收父元素传过来的参数。
父组件：
<template><child :data="data"></child>
</template><script setup>
import { ref } from 'vue'
import child from './child.vue'const data= ref('传个参')
</script>
子组件：
<template><div>{{ props.data}}</div>
</template><script setup>
import { defineProps } from 'vue'const props = defineProps({ //接收父组件传过来的参数data: {type: String,default: '',},
})
</script>
2.父传子（useAttrs）
父传给子参数，props参数（指 :data="参数"）由defineProps接收，但非props参数（指 data="参数" 少了：）由useAttrs接收。
父组件：
<template><child :name="参数" data="666"/>
</template><script setup>
import child from './child.vue'
</script>
子组件：
<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": "666" }
</script>
3.子传父（ref，defineExpose ）
此方法是通过，父组件调用子组件抛出的的方法和参数来进行传参的。
子组件：
<template><div></div>
</template><script setup>import { defineExpose } from "vue"const chileMethod = () =>{console.log("我是方法")}const name = ref('参数')defineExpose({ // 对外暴露name,chileMethod})
</script>
父组件：
<template><child ref="myref"></child><button @click="myClick">点击</button>
</template><script setup>import child from "./child.vue"import { ref } from "vue"const myref = ref(null)const myClick = () => {console.log(myref.value.name) // 直接获取到子组件的属性myref.value.chileMethod() // 直接调用子组件的方法}
</script>
4.子传父（defineEmits）
在子元素里面使用defineEmits接收父元素里面的方法，并通过调用方法将参数传给父元素。
子组件：
<template><div ></div>
</template><script setup>
import { ref, defineEmits } from 'vue'const data = ref('传个参')
const emits = defineEmits(['addEvent']) //addEvent是父元素里面的一个函数方法，通过这个方法传参
const handleSubmit = () => { emits('addEvent', data.value)
}
</script>
父组件：
<template><child @addEvent="handle"></child>
</template><script setup>
import { ref } from 'vue'
import child from './child.vue'const handle = value => {console.log(value); // '传个参'
}
</script>
5.子传父（v-model）
v-model其实语法糖，如下两行代码作用是一样, 上面是下面的简写。
<chile v-model:title="title" /><chile :title="title" @update:title="title = $event" />
父组件：
<template><child v-model:name="name" v-model:num="num"></child>
</template><script setup>import child from "./child.vue"import { ref, reactive } from "vue"const name = ref("参数")const num = ref("666")
</script>
子组件：
注意：update:是固定写法。
<template><button @click="clickEvent">点击</button>
</template><script setup>import { defineEmits } from "vue"const emit = defineEmits(["name","num"])// 子组件更新参数const clickEvent = () => {emit("update:name", "孙悟空")emit("update:num", "999")}
</script>
二、祖孙通信
1.祖传孙（provide/inject）
这个祖传孙也包括了父传子。provide和inject叫依赖注入，是vue官方提供的API，它们可以实现多层组件传递数据，无论层级有多深，都可以通过这API实现。
祖组件：
<template><div></div>
</template><script setup>
import { ref, provide } from 'vue'
const name = ref('参数')// 向后代组件提供数据, 只要是后代都能接收
provide('name', name.value)
</script>
孙组件：
<template><div>{{ name }}</div>
</template><script setup>
import { inject } from 'vue'
// 接收顶层组件的通信
const name = inject('name')
</script>
三、任意关系通信
1.mitt
首先下载 npm 包
npm install --save mitt在main.js文件进行全局挂载, $bus是自定义属性名：
import mitt from "mitt"const app = createApp(App)app.config.globalProperties.$bus = new mitt()
传参出去的组件：
<script setup>import mitt from 'mitt'const emitter = mitt()emitter.emit('自定义的事件名称','参数')
</script>
接收参数的组件：
<script setup>import mitt from 'mitt'const emitter = mitt()emitter.on('自定义的事件名称', '参数' )
</script>
2.vuex / pinia
后续会出一个专门的文章讲解这部分。
3.浏览器缓存
- 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();
四、路由跳转通信
1.query传参
传递参数：
import router from "@/router";const query = { id: 666, name: '参数' }
router.push({ path: '/user', query })
接收参数：
import { useRoute} from 'vue-router'const route = useRoute()
console.log(route.query)
2.params传参
传递参数：
router.push({name: 'test', params: {name: '参数'}
})
接收参数：
import { useRoute} from 'vue-router'
const route = useRoute()
console.log(route.params) // { name: '参数' }
3.state传参
传递参数
<script setup>import { useRouter } from 'vue-router'
const router = useRouter();
router.push({ path: "/project",state:{data:JSON.stringify(json)}})<script>
接收参数：
<script setup>
import { ref } from "vue";
const tableData = ref([]);if (history.state.data) {tableData.value = JSON.parse(history.state.data)
}
<script>
