如何使用 Provide/Inject 将数组从 parent 组件传递到孙组件

Question

我正在尝试使用 Provide/Inject 功能使 parent 组件能够根据以下 Vue 3 组合 API 文档“提供”数组给孙子组件： https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity

我的 parent 组件中的数组如下所示：

const arrayItems= [
  { name: 'itemOne' },
  { name: 'itemTwo' },
  { name: 'itemThree' },
  { name: 'itemFour' },
  { name: 'itemFive' },
]

上述 Provide/Inject 的文档似乎只显示了提供基本类型的示例。基于文档中的概念，我试图为孙组件提供一个数组，但注入的数组似乎没有在孙组件上呈现。知道如何设置 Provide/Inject 以便将数组传递给孙组件吗？

到目前为止，这是我的代码：

Parent

<template>
  <div class="h-full">
    <child />
  </div>
</template>

<script>
import { provide } from 'vue'
import { Child } from '@Child'

const arrayItems= [
  { name: 'itemOne' },
  { name: 'itemTwo' },
  { name: 'itemThree' },
  { name: 'itemFour' },
  { name: 'itemFive' },
]

export default {
  components: {
    Child
  },
  setup() {
    provide('navigation', arrayItems)

    return {
      arrayItems
    }
  }
}
</script>

Child

<template>
  <div>
    <grandchild />
  </div>
</template>

<script>
import { GrandChild } from '@'
export default {
    components: {
        GrandChild 
    }
}
</script>

盛大Child

<template>
  <div>
     <ul>
       <li v-for="item in items" :key="item.id"></li>
     </ul>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
    setup() {
        const { items } = inject('navigation')

        return {
            items
        }
    }
}
</script>

Answer 1

在 GrandChild.vue 中，您正在解构 items 属性的 inject 编辑值，但 provide 编辑项是Array，没有这样的属性。

解决方案

不要破坏 inject 编辑的值：

// GrandChild.vue
export default {
  setup() {
    // const { items } = inject('navigation') ❌
    const items = inject('navigation') ✅
    ⋮
  },
}

demo 1

或provide对象中的数组数据items 属性:

// Parent.vue
export default {
  setup() {
    // provide('navigation', arrayItems) ❌
    provide('navigation', { items: arrayItems }) ✅
    ⋮
  }
}

demo 2

如何使用 Provide/Inject 将数组从 parent 组件传递到孙组件

How to use Provide/Inject to pass an array from a parent component to a grandchild component

vue.js

dependency-injection

vue-component

vuejs3

vue-composition-api

解决方案