[Vue]跨组件传值

父子组件传值

        详情可以看文章

跨组件传值

        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>

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

跨组件传函数

        传递操作与传递值一样。有一点需要注意：函数传递给后辈组件之后，在后辈组件中触发，执行的对象不会变。例如该函数是给原组件中的num的值+1，那么传递给后辈组件并在其中触发，修改的还是原组件中的num的值。