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>