当前位置：首页 > article >正文

[Vue]跨组件传值

article 2025/9/12 12:39:46

父子组件传值

详情可以看文章

跨组件传值

Vue 的核⼼是单向数据流。所以在父子组件间传值的时候，数据通常是通过属性从⽗组件向⼦组件，⽽⼦组件通过事件将数据传递回⽗组件。多层嵌套场景⼀般使⽤链式传递的⽅式实现provide+inject的⽅式适⽤于需要跨层级共享数据的场景，但需要注意不要滥⽤。如果组件层级较深，且需要在多个组件之间共享状态，可以使⽤ Vuex 或 Pinia 等状态管理⼯具。

多层嵌套传值：

现在有三个组件，也就是爷爷、爸爸、儿子三个组件。

1.在父组件中使用provide，传递需要传递的数据。格式:provide('该数据的唯一标识名',数据)

2.在子组件中使用inject,接收传递来的数据。格式:const obj = inject('该数据的唯一标识名')

<!--App.vue-->
<script setup>
import {provide, ref} from "vue";import mymiddle from './middle.vue'const myobj = ref({name: "John",email: "john@gmail.com"})provide("objId", myobj)</script>
<template><p>我是爷爷组件</p><mymiddle></mymiddle>
</template><style scoped>
</style><!--middle.vue-->
<script setup>
import foot from './foot.vue'
</script><template><p>我是爸爸组件</p><foot></foot>
</template><!--foot.vue-->
<script setup>
import {inject, ref} from "vue";const getobj = inject("objId")</script><template><p>我是儿子组件</p><p>接收的数据:{{getobj}}</p>
</template>

注意，这个模式只能用在多层嵌套中，由祖辈往下传，不能下往上传。同样的，同级之间也不能直接传。